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:

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

Usage

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

2.2 KiB Raw Blame History