527 lines
20 KiB
TypeScript
527 lines
20 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from 'react'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Label } from '@/components/ui/label'
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||
import { Checkbox } from '@/components/ui/checkbox'
|
||
import { Switch } from '@/components/ui/switch'
|
||
import { Slider } from '@/components/ui/slider'
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||
import { PhoneInput } from '@/components/ui/phone-input'
|
||
import {
|
||
Eye,
|
||
EyeOff,
|
||
Search,
|
||
Calendar,
|
||
Mail,
|
||
User,
|
||
Lock
|
||
} from 'lucide-react'
|
||
|
||
export function FormsDemo() {
|
||
const [showPassword, setShowPassword] = useState(false)
|
||
const [switchValue, setSwitchValue] = useState(false)
|
||
const [sliderValue, setSliderValue] = useState([50])
|
||
const [checkboxValue, setCheckboxValue] = useState(false)
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* Базовые инпуты */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white">Базовые поля ввода</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
{/* Обычный инпут */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="basic-input" className="text-white/90">
|
||
Обычное поле
|
||
</Label>
|
||
<Input
|
||
id="basic-input"
|
||
type="text"
|
||
placeholder="Введите текст..."
|
||
className="glass-input text-white placeholder:text-white/50"
|
||
/>
|
||
</div>
|
||
|
||
{/* Инпут с иконкой */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="icon-input" className="text-white/90">
|
||
Поле с иконкой
|
||
</Label>
|
||
<div className="relative">
|
||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
|
||
<Input
|
||
id="icon-input"
|
||
type="text"
|
||
placeholder="Поиск..."
|
||
className="pl-10 glass-input text-white placeholder:text-white/50"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Пароль */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="password-input" className="text-white/90">
|
||
Пароль
|
||
</Label>
|
||
<div className="relative">
|
||
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
|
||
<Input
|
||
id="password-input"
|
||
type={showPassword ? "text" : "password"}
|
||
placeholder="Введите пароль"
|
||
className="pl-10 pr-10 glass-input text-white placeholder:text-white/50"
|
||
/>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="icon"
|
||
className="absolute right-2 top-1/2 -translate-y-1/2 h-6 w-6 text-white/70 hover:text-white hover:bg-white/10"
|
||
onClick={() => setShowPassword(!showPassword)}
|
||
>
|
||
{showPassword ? (
|
||
<EyeOff className="h-4 w-4" />
|
||
) : (
|
||
<Eye className="h-4 w-4" />
|
||
)}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Email */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="email-input" className="text-white/90">
|
||
Email
|
||
</Label>
|
||
<div className="relative">
|
||
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
|
||
<Input
|
||
id="email-input"
|
||
type="email"
|
||
placeholder="example@domain.com"
|
||
className="pl-10 glass-input text-white placeholder:text-white/50"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Телефон */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="phone-input" className="text-white/90">
|
||
Телефон
|
||
</Label>
|
||
<PhoneInput
|
||
id="phone-input"
|
||
placeholder="+7 (999) 999-99-99"
|
||
className="glass-input text-white placeholder:text-white/50"
|
||
/>
|
||
</div>
|
||
|
||
{/* Дата */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="date-input" className="text-white/90">
|
||
Дата
|
||
</Label>
|
||
<div className="relative">
|
||
<Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
|
||
<Input
|
||
id="date-input"
|
||
type="date"
|
||
className="pl-10 glass-input text-white placeholder:text-white/50"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Число */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="number-input" className="text-white/90">
|
||
Число
|
||
</Label>
|
||
<Input
|
||
id="number-input"
|
||
type="number"
|
||
placeholder="0"
|
||
min="0"
|
||
max="100"
|
||
className="glass-input text-white placeholder:text-white/50"
|
||
/>
|
||
</div>
|
||
|
||
{/* Отключенное поле */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="disabled-input" className="text-white/90">
|
||
Отключенное поле
|
||
</Label>
|
||
<Input
|
||
id="disabled-input"
|
||
type="text"
|
||
placeholder="Недоступно для редактирования"
|
||
disabled
|
||
className="glass-input text-white placeholder:text-white/50"
|
||
/>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Селекты и выпадающие списки */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white">Селекты и выпадающие списки</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
<div className="space-y-2">
|
||
<Label className="text-white/90">
|
||
Выберите опцию
|
||
</Label>
|
||
<Select>
|
||
<SelectTrigger className="glass-input text-white">
|
||
<SelectValue placeholder="Выберите..." />
|
||
</SelectTrigger>
|
||
<SelectContent className="glass-card border-white/10">
|
||
<SelectItem value="option1">Опция 1</SelectItem>
|
||
<SelectItem value="option2">Опция 2</SelectItem>
|
||
<SelectItem value="option3">Опция 3</SelectItem>
|
||
<SelectItem value="option4">Опция 4</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label className="text-white/90">
|
||
Тип организации
|
||
</Label>
|
||
<Select>
|
||
<SelectTrigger className="glass-input text-white">
|
||
<SelectValue placeholder="Выберите тип..." />
|
||
</SelectTrigger>
|
||
<SelectContent className="glass-card border-white/10">
|
||
<SelectItem value="fulfillment">Фулфилмент</SelectItem>
|
||
<SelectItem value="seller">Селлер</SelectItem>
|
||
<SelectItem value="logist">Логистика</SelectItem>
|
||
<SelectItem value="wholesale">Поставщик</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Чекбоксы и переключатели */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white">Чекбоксы и переключатели</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
{/* Чекбоксы */}
|
||
<div className="space-y-4">
|
||
<h4 className="text-white/90 text-sm font-medium">Чекбоксы</h4>
|
||
<div className="space-y-3">
|
||
<div className="flex items-center space-x-2">
|
||
<Checkbox
|
||
id="checkbox1"
|
||
checked={checkboxValue}
|
||
onCheckedChange={(checked) => setCheckboxValue(!!checked)}
|
||
/>
|
||
<Label
|
||
htmlFor="checkbox1"
|
||
className="text-white/90 text-sm cursor-pointer"
|
||
>
|
||
Согласие с условиями
|
||
</Label>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<Checkbox id="checkbox2" />
|
||
<Label
|
||
htmlFor="checkbox2"
|
||
className="text-white/90 text-sm cursor-pointer"
|
||
>
|
||
Получать уведомления
|
||
</Label>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<Checkbox id="checkbox3" disabled />
|
||
<Label
|
||
htmlFor="checkbox3"
|
||
className="text-white/60 text-sm"
|
||
>
|
||
Отключенный чекбокс
|
||
</Label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Переключатели */}
|
||
<div className="space-y-4">
|
||
<h4 className="text-white/90 text-sm font-medium">Переключатели (Switch)</h4>
|
||
<div className="space-y-3">
|
||
<div className="flex items-center space-x-2">
|
||
<Switch
|
||
id="switch1"
|
||
checked={switchValue}
|
||
onCheckedChange={setSwitchValue}
|
||
/>
|
||
<Label
|
||
htmlFor="switch1"
|
||
className="text-white/90 text-sm cursor-pointer"
|
||
>
|
||
Включить уведомления
|
||
</Label>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<Switch id="switch2" />
|
||
<Label
|
||
htmlFor="switch2"
|
||
className="text-white/90 text-sm cursor-pointer"
|
||
>
|
||
Темная тема
|
||
</Label>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<Switch id="switch3" disabled />
|
||
<Label
|
||
htmlFor="switch3"
|
||
className="text-white/60 text-sm"
|
||
>
|
||
Отключенный переключатель
|
||
</Label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Слайдеры */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white">Слайдеры</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
<div className="space-y-4">
|
||
<Label className="text-white/90 text-sm font-medium">
|
||
Значение: {sliderValue[0]}
|
||
</Label>
|
||
<Slider
|
||
value={sliderValue}
|
||
onValueChange={setSliderValue}
|
||
max={100}
|
||
min={0}
|
||
step={1}
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<Label className="text-white/90 text-sm font-medium">
|
||
Диапазон цен: 1000 - 5000 ₽
|
||
</Label>
|
||
<Slider
|
||
defaultValue={[1000, 5000]}
|
||
max={10000}
|
||
min={0}
|
||
step={100}
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Состояния полей */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white">Состояния полей</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
{/* Обычное состояние */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="normal-state" className="text-white/90">
|
||
Обычное состояние
|
||
</Label>
|
||
<Input
|
||
id="normal-state"
|
||
type="text"
|
||
placeholder="Введите текст..."
|
||
className="glass-input text-white placeholder:text-white/50"
|
||
/>
|
||
</div>
|
||
|
||
{/* Фокус */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="focus-state" className="text-white/90">
|
||
Состояние фокуса
|
||
</Label>
|
||
<Input
|
||
id="focus-state"
|
||
type="text"
|
||
placeholder="Кликните для фокуса"
|
||
className="glass-input text-white placeholder:text-white/50 focus:border-primary focus:ring-2 focus:ring-primary/20"
|
||
autoFocus
|
||
/>
|
||
</div>
|
||
|
||
{/* Ошибка */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="error-state" className="text-white/90">
|
||
Состояние ошибки
|
||
</Label>
|
||
<Input
|
||
id="error-state"
|
||
type="text"
|
||
placeholder="Неверные данные"
|
||
className="glass-input text-white placeholder:text-white/50 border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-500/20"
|
||
/>
|
||
<p className="text-red-400 text-xs">Это поле обязательно для заполнения</p>
|
||
</div>
|
||
|
||
{/* Успех */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="success-state" className="text-white/90">
|
||
Состояние успеха
|
||
</Label>
|
||
<Input
|
||
id="success-state"
|
||
type="text"
|
||
value="Правильно заполнено"
|
||
className="glass-input text-white placeholder:text-white/50 border-green-500 focus:border-green-500 focus:ring-2 focus:ring-green-500/20"
|
||
readOnly
|
||
/>
|
||
<p className="text-green-400 text-xs">Данные сохранены успешно</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Примеры форм */}
|
||
<Card className="glass-card border-white/10">
|
||
<CardHeader>
|
||
<CardTitle className="text-white">Примеры форм</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-8">
|
||
{/* Форма входа */}
|
||
<div className="space-y-4">
|
||
<h4 className="text-white/90 text-sm font-medium">Форма входа</h4>
|
||
<div className="space-y-4 max-w-sm">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="login-email" className="text-white/90">
|
||
Email
|
||
</Label>
|
||
<div className="relative">
|
||
<User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
|
||
<Input
|
||
id="login-email"
|
||
type="email"
|
||
placeholder="example@domain.com"
|
||
className="pl-10 glass-input text-white placeholder:text-white/50"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="login-password" className="text-white/90">
|
||
Пароль
|
||
</Label>
|
||
<div className="relative">
|
||
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/50 h-4 w-4" />
|
||
<Input
|
||
id="login-password"
|
||
type="password"
|
||
placeholder="Введите пароль"
|
||
className="pl-10 glass-input text-white placeholder:text-white/50"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center space-x-2">
|
||
<Checkbox id="remember" />
|
||
<Label htmlFor="remember" className="text-white/90 text-sm cursor-pointer">
|
||
Запомнить меня
|
||
</Label>
|
||
</div>
|
||
<Button variant="glass" className="w-full">
|
||
Войти
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Форма регистрации */}
|
||
<div className="space-y-4">
|
||
<h4 className="text-white/90 text-sm font-medium">Форма регистрации</h4>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="reg-name" className="text-white/90">
|
||
Имя
|
||
</Label>
|
||
<Input
|
||
id="reg-name"
|
||
type="text"
|
||
placeholder="Ваше имя"
|
||
className="glass-input text-white placeholder:text-white/50"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="reg-surname" className="text-white/90">
|
||
Фамилия
|
||
</Label>
|
||
<Input
|
||
id="reg-surname"
|
||
type="text"
|
||
placeholder="Ваша фамилия"
|
||
className="glass-input text-white placeholder:text-white/50"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2 md:col-span-2">
|
||
<Label htmlFor="reg-email" className="text-white/90">
|
||
Email
|
||
</Label>
|
||
<Input
|
||
id="reg-email"
|
||
type="email"
|
||
placeholder="example@domain.com"
|
||
className="glass-input text-white placeholder:text-white/50"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2 md:col-span-2">
|
||
<Label htmlFor="reg-phone" className="text-white/90">
|
||
Телефон
|
||
</Label>
|
||
<PhoneInput
|
||
id="reg-phone"
|
||
placeholder="+7 (999) 999-99-99"
|
||
className="glass-input text-white placeholder:text-white/50"
|
||
/>
|
||
</div>
|
||
<div className="space-y-2 md:col-span-2">
|
||
<Label className="text-white/90">
|
||
Тип организации
|
||
</Label>
|
||
<Select>
|
||
<SelectTrigger className="glass-input text-white">
|
||
<SelectValue placeholder="Выберите тип..." />
|
||
</SelectTrigger>
|
||
<SelectContent className="glass-card border-white/10">
|
||
<SelectItem value="fulfillment">Фулфилмент</SelectItem>
|
||
<SelectItem value="seller">Селлер</SelectItem>
|
||
<SelectItem value="logist">Логистика</SelectItem>
|
||
<SelectItem value="wholesale">Поставщик</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div className="flex items-center space-x-2 md:col-span-2">
|
||
<Checkbox id="reg-terms" />
|
||
<Label htmlFor="reg-terms" className="text-white/90 text-sm cursor-pointer">
|
||
Согласен с условиями использования
|
||
</Label>
|
||
</div>
|
||
<div className="flex gap-2 md:col-span-2">
|
||
<Button variant="outline" className="flex-1">
|
||
Отмена
|
||
</Button>
|
||
<Button variant="glass" className="flex-1">
|
||
Зарегистрироваться
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|