Refactor question creation card

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { useChat } from '@ai-sdk/react';
-import QuestionParameterForm from '@/components/QuestionParameterForm';
+import { QuestionParameterForm } from '@/components/question-creation-card';
 import { QuestionType, QuestionParameters, GeneratedQuestion } from '@/types/quiz';
 
 const QUESTION_TYPES: QuestionType[] = [

src/components/ParameterInput.tsx

@@ -1,93 +1,84 @@
 'use client';
 
 import { ParameterConfig } from '@/types/questionConfig';
+import { SelectInput, RangeInput, TextInput, CheckboxInput } from './inputs';
 
 interface ParameterInputProps {
   config: ParameterConfig;
   value: any;
   onChange: (value: any) => void;
+  className?: string;
+  disabled?: boolean;
 }
 
-export default function ParameterInput({ config, value, onChange }: ParameterInputProps) {
-  const { key, label, type, options, min, max, step, placeholder, helpText } = config;
-  
-  const currentValue = value ?? config.defaultValue;
-
-  const baseInputClasses = "w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500";
+export default function ParameterInput({ 
+  config, 
+  value, 
+  onChange, 
+  className = '',
+  disabled = false 
+}: ParameterInputProps) {
+  const { type, label, options, min, max, step, placeholder, helpText, key } = config;
 
   switch (type) {
     case 'select':
       return (
-        <div>
-          <label className="block text-sm font-medium mb-2">{label}</label>
-          <select 
-            value={currentValue}
-            onChange={(e) => {
-              const val = options?.find(opt => opt.value.toString() === e.target.value)?.value;
-              onChange(val);
-            }}
-            className={baseInputClasses}
-          >
-            {options?.map((option) => (
-              <option key={option.value.toString()} value={option.value.toString()}>
-                {option.label}
-              </option>
-            ))}
-          </select>
-        </div>
+        <SelectInput
+          label={label}
+          value={value}
+          defaultValue={config.defaultValue}
+          options={options || []}
+          onChange={onChange}
+          className={className}
+          disabled={disabled}
+          placeholder={placeholder}
+          helpText={helpText}
+        />
       );
 
     case 'range':
       return (
-        <div>
-          <label className="block text-sm font-medium mb-2">{label}</label>
-          <input 
-            type="range" 
-            min={min} 
-            max={max} 
-            step={step}
-            value={currentValue}
-            onChange={(e) => onChange(parseInt(e.target.value))}
-            className="w-full"
-          />
-          <div className="text-center text-sm text-gray-600">
-            {currentValue} {helpText}
-          </div>
-        </div>
+        <RangeInput
+          label={label}
+          value={value}
+          defaultValue={config.defaultValue}
+          min={min || 1}
+          max={max || 10}
+          step={step}
+          onChange={onChange}
+          className={className}
+          disabled={disabled}
+          valueUnit={helpText}
+          showValue={true}
+        />
       );
 
     case 'input':
       return (
-        <div>
-          <label className="block text-sm font-medium mb-2">{label}</label>
-          <input 
-            type="text"
-            value={currentValue || ''}
-            placeholder={placeholder}
-            onChange={(e) => onChange(e.target.value)}
-            className={baseInputClasses}
-          />
-          {helpText && (
-            <div className="text-xs text-gray-500 mt-1">{helpText}</div>
-          )}
-        </div>
+        <TextInput
+          label={label}
+          value={value}
+          defaultValue={config.defaultValue}
+          onChange={onChange}
+          className={className}
+          disabled={disabled}
+          placeholder={placeholder}
+          helpText={helpText}
+        />
       );
 
     case 'checkbox':
       return (
-        <div className="flex items-center">
-          <input 
-            type="checkbox"
-            id={key}
-            checked={currentValue || false}
-            onChange={(e) => onChange(e.target.checked)}
-            className="mr-2"
-          />
-          <label htmlFor={key} className="text-sm font-medium">{label}</label>
-          {helpText && (
-            <div className="text-xs text-gray-500 ml-2">{helpText}</div>
-          )}
-        </div>
+        <CheckboxInput
+          label={label}
+          value={value}
+          defaultValue={config.defaultValue}
+          onChange={onChange}
+          className={className}
+          disabled={disabled}
+          helpText={helpText}
+          id={key}
+        />
       );
 
     default:

src/components/question-creation-card/ParameterInput.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { ParameterConfig } from '@/types/questionConfig';
+import { SelectInput, RangeInput, TextInput, CheckboxInput } from './inputs';
+
+interface ParameterInputProps {
+  config: ParameterConfig;
+  value: any;
+  onChange: (value: any) => void;
+  className?: string;
+  disabled?: boolean;
+}
+
+export default function ParameterInput({ 
+  config, 
+  value, 
+  onChange, 
+  className = '',
+  disabled = false 
+}: ParameterInputProps) {
+  const { type, label, options, min, max, step, placeholder, helpText, key } = config;
+
+  switch (type) {
+    case 'select':
+      return (
+        <SelectInput
+          label={label}
+          value={value}
+          defaultValue={config.defaultValue}
+          options={options || []}
+          onChange={onChange}
+          className={className}
+          disabled={disabled}
+          placeholder={placeholder}
+          helpText={helpText}
+        />
+      );
+
+    case 'range':
+      return (
+        <RangeInput
+          label={label}
+          value={value}
+          defaultValue={config.defaultValue}
+          min={min || 1}
+          max={max || 10}
+          step={step}
+          onChange={onChange}
+          className={className}
+          disabled={disabled}
+          valueUnit={helpText}
+          showValue={true}
+        />
+      );
+
+    case 'input':
+      return (
+        <TextInput
+          label={label}
+          value={value}
+          defaultValue={config.defaultValue}
+          onChange={onChange}
+          className={className}
+          disabled={disabled}
+          placeholder={placeholder}
+          helpText={helpText}
+        />
+      );
+
+    case 'checkbox':
+      return (
+        <CheckboxInput
+          label={label}
+          value={value}
+          defaultValue={config.defaultValue}
+          onChange={onChange}
+          className={className}
+          disabled={disabled}
+          helpText={helpText}
+          id={key}
+        />
+      );
+
+    default:
+      return null;
+  }
+}

src/components/{QuestionParameterForm.tsx → question-creation-card/QuestionParameterForm.tsx}

@@ -1,7 +1,7 @@
 'use client';
 
 import { QuestionType, QuestionParameters } from '@/types/quiz';
-import { questionTypeConfigs, defaultQuestionTypeConfig } from '@/types/questionConfig';
+import { questionTypeConfigs, defaultQuestionTypeConfig } from '@/config/questionTypes';
 import ParameterInput from './ParameterInput';
 
 interface QuestionParameterFormProps {

src/components/question-creation-card/index.ts

@@ -0,0 +1,6 @@
+// Question Creation Card Components
+export { default as QuestionParameterForm } from './QuestionParameterForm';
+export { default as ParameterInput } from './ParameterInput';
+
+// Re-export input components for convenience
+export * from './inputs';

src/components/question-creation-card/inputs/CheckboxInput.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+export interface CheckboxInputProps {
+  label: string;
+  value?: boolean;
+  defaultValue?: boolean;
+  onChange: (value: boolean) => void;
+  className?: string;
+  disabled?: boolean;
+  helpText?: string;
+  required?: boolean;
+  id?: string;
+}
+
+export default function CheckboxInput({
+  label,
+  value,
+  defaultValue = false,
+  onChange,
+  className = '',
+  disabled = false,
+  helpText,
+  required = false,
+  id,
+}: CheckboxInputProps) {
+  const currentValue = value ?? defaultValue;
+  const inputId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+
+  return (
+    <div className={`flex items-start ${className}`}>
+      <div className="flex items-center h-5">
+        <input 
+          type="checkbox"
+          id={inputId}
+          checked={currentValue}
+          onChange={(e) => onChange(e.target.checked)}
+          disabled={disabled}
+          required={required}
+          className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
+        />
+      </div>
+      <div className="ml-3">
+        <label htmlFor={inputId} className="text-sm font-medium text-gray-700 dark:text-gray-300">
+          {label}
+          {required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+        {helpText && (
+          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+            {helpText}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/question-creation-card/inputs/RangeInput.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+export interface RangeInputProps {
+  label: string;
+  value?: number;
+  defaultValue?: number;
+  min: number;
+  max: number;
+  step?: number;
+  onChange: (value: number) => void;
+  className?: string;
+  disabled?: boolean;
+  showValue?: boolean;
+  valueUnit?: string;
+  helpText?: string;
+}
+
+export default function RangeInput({
+  label,
+  value,
+  defaultValue = 1,
+  min,
+  max,
+  step = 1,
+  onChange,
+  className = '',
+  disabled = false,
+  showValue = true,
+  valueUnit = '',
+  helpText,
+}: RangeInputProps) {
+  const currentValue = value ?? defaultValue;
+
+  return (
+    <div className={className}>
+      <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
+        {label}
+      </label>
+      <input 
+        type="range" 
+        min={min} 
+        max={max} 
+        step={step}
+        value={currentValue}
+        onChange={(e) => onChange(parseInt(e.target.value))}
+        disabled={disabled}
+        className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+      />
+      {showValue && (
+        <div className="text-center text-sm text-gray-600 dark:text-gray-400 mt-1">
+          {currentValue} {valueUnit} {helpText}
+        </div>
+      )}
+      {!showValue && helpText && (
+        <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+          {helpText}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/question-creation-card/inputs/SelectInput.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+export interface SelectOption {
+  value: string | number;
+  label: string;
+}
+
+export interface SelectInputProps {
+  label: string;
+  value?: string | number;
+  defaultValue?: string | number;
+  options: SelectOption[];
+  onChange: (value: string | number) => void;
+  className?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  helpText?: string;
+}
+
+export default function SelectInput({
+  label,
+  value,
+  defaultValue,
+  options,
+  onChange,
+  className = '',
+  disabled = false,
+  placeholder,
+  helpText,
+}: SelectInputProps) {
+  const currentValue = value ?? defaultValue;
+  const baseClasses = "w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed";
+
+  return (
+    <div className={className}>
+      <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
+        {label}
+      </label>
+      <select 
+        value={currentValue?.toString() || ''}
+        onChange={(e) => {
+          const selectedOption = options.find(opt => opt.value.toString() === e.target.value);
+          if (selectedOption) {
+            onChange(selectedOption.value);
+          }
+        }}
+        disabled={disabled}
+        className={`${baseClasses} bg-white dark:bg-gray-700 text-gray-900 dark:text-white border-gray-300 dark:border-gray-600`}
+      >
+        {placeholder && (
+          <option value="" disabled>
+            {placeholder}
+          </option>
+        )}
+        {options.map((option) => (
+          <option key={option.value.toString()} value={option.value.toString()}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      {helpText && (
+        <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+          {helpText}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/question-creation-card/inputs/TextInput.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+export interface TextInputProps {
+  label: string;
+  value?: string;
+  defaultValue?: string;
+  onChange: (value: string) => void;
+  type?: 'text' | 'email' | 'password' | 'url' | 'tel';
+  className?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  helpText?: string;
+  required?: boolean;
+  maxLength?: number;
+  minLength?: number;
+  pattern?: string;
+}
+
+export default function TextInput({
+  label,
+  value,
+  defaultValue = '',
+  onChange,
+  type = 'text',
+  className = '',
+  disabled = false,
+  placeholder,
+  helpText,
+  required = false,
+  maxLength,
+  minLength,
+  pattern,
+}: TextInputProps) {
+  const currentValue = value ?? defaultValue;
+  const baseClasses = "w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed";
+
+  return (
+    <div className={className}>
+      <label className="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">
+        {label}
+        {required && <span className="text-red-500 ml-1">*</span>}
+      </label>
+      <input 
+        type={type}
+        value={currentValue}
+        placeholder={placeholder}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        required={required}
+        maxLength={maxLength}
+        minLength={minLength}
+        pattern={pattern}
+        className={`${baseClasses} bg-white dark:bg-gray-700 text-gray-900 dark:text-white border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400`}
+      />
+      {helpText && (
+        <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+          {helpText}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/question-creation-card/inputs/index.ts

@@ -0,0 +1,12 @@
+// Independent input components
+export { default as SelectInput } from './SelectInput';
+export type { SelectInputProps, SelectOption } from './SelectInput';
+
+export { default as RangeInput } from './RangeInput';
+export type { RangeInputProps } from './RangeInput';
+
+export { default as TextInput } from './TextInput';
+export type { TextInputProps } from './TextInput';
+
+export { default as CheckboxInput } from './CheckboxInput';
+export type { CheckboxInputProps } from './CheckboxInput';

src/{types/questionConfig.ts → config/questionTypes.ts}

@@ -1,27 +1,4 @@
-export type ParameterType = 'select' | 'range' | 'input' | 'checkbox';
-
-export interface ParameterOption {
-  value: string | number;
-  label: string;
-}
-
-export interface ParameterConfig {
-  key: string;
-  label: string;
-  type: ParameterType;
-  defaultValue?: any;
-  options?: ParameterOption[];
-  min?: number;
-  max?: number;
-  step?: number;
-  placeholder?: string;
-  helpText?: string;
-}
-
-export interface QuestionTypeConfig {
-  id: string;
-  parameters: ParameterConfig[];
-}
+import { QuestionTypeConfig } from '@/types/questionConfig';
 
 // Configuration for each question type
 export const questionTypeConfigs: Record<string, QuestionTypeConfig> = {