# CreateInput Component

Video creation input form with configuration options.

## File Structure

```
CreateInput/
├── VideoCreationForm.tsx     # Main form component
├── ConfigPanel.tsx            # Configuration panel with all options
├── config-options.ts          # Configuration options and types
├── index.ts                   # Module exports
└── README.md                  # This file
```

## Components

### VideoCreationForm
Main form component for video creation, includes:
- Photo upload (character, scene, prop)
- Text input area
- Configuration options
- Create button

### ConfigPanel
Configuration panel with unified circular button style:
- Language selector (14 languages)
- Auto Script toggle (AI Story Copilot)
- Duration selector (8s, 1min, 2min, auto)
- Aspect ratio selector (landscape/portrait)

All buttons follow the same design pattern:
- Circular buttons with `rounded-full`
- Border: `border-white/20`
- Hover: `hover:bg-white/5 hover:border-cyan-400/60`
- Active state: `border-cyan-400 bg-cyan-400/10`
- Cyan color theme for interactions

## Configuration Options

Defined in `config-options.ts`:

```typescript
interface ConfigOptions {
    language: LanguageValue;           // Default: 'english'
    expansion_mode: boolean;           // Default: false
    videoDuration: VideoDurationValue; // Default: 'unlimited'
    aspect_ratio: AspectRatioValue;    // Default: 'VIDEO_ASPECT_RATIO_LANDSCAPE'
}
```

## Usage

```tsx
import { VideoCreationForm } from '@/components/pages/create-video/CreateInput';

export default function CreatePage() {
  return <VideoCreationForm />;
}
```

## Design System

All configuration buttons follow a unified design:
- **Base style**: `rounded-full border border-white/20 bg-transparent`
- **Hover**: `hover:bg-white/5 hover:border-cyan-400/60 hover:text-cyan-400`
- **Active**: `border-cyan-400 bg-cyan-400/10 text-cyan-400`
- **Transition**: `transition-all duration-200`

## Notes

- Configuration options are synchronized with ChatInputBox component
- All text and labels are in English as per project guidelines
- Uses Tailwind CSS 3.x for all styling
- Uses Ant Design icons for consistency with existing UI
- Responsive design with mobile/desktop support