114 lines
3.8 KiB
TypeScript
114 lines
3.8 KiB
TypeScript
"use client"
|
||
|
||
import { Button } from "@/components/ui/button"
|
||
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { AuthLayout } from "./auth-layout"
|
||
import { Package, ShoppingCart, ArrowLeft, Truck, Building2 } from "lucide-react"
|
||
|
||
interface CabinetSelectStepProps {
|
||
onNext: (cabinetType: 'fulfillment' | 'seller' | 'logist' | 'wholesale') => void
|
||
onBack: () => void
|
||
}
|
||
|
||
export function CabinetSelectStep({ onNext, onBack }: CabinetSelectStepProps) {
|
||
const cabinets = [
|
||
{
|
||
id: 'fulfillment' as const,
|
||
title: 'Фулфилмент',
|
||
description: 'Склады и логистика',
|
||
icon: Package,
|
||
features: ['Склады', 'Логистика', 'ИНН'],
|
||
color: 'blue'
|
||
},
|
||
{
|
||
id: 'seller' as const,
|
||
title: 'Селлер',
|
||
description: 'Продажи на маркетплейсах',
|
||
icon: ShoppingCart,
|
||
features: ['Wildberries', 'Ozon', 'Аналитика'],
|
||
color: 'purple'
|
||
},
|
||
{
|
||
id: 'logist' as const,
|
||
title: 'Логистика',
|
||
description: 'Логистические решения',
|
||
icon: Truck,
|
||
features: ['Доставка', 'Склады', 'ИНН'],
|
||
color: 'green'
|
||
},
|
||
{
|
||
id: 'wholesale' as const,
|
||
title: 'Оптовик',
|
||
description: 'Оптовые продажи',
|
||
icon: Building2,
|
||
features: ['Опт', 'Поставки', 'ИНН'],
|
||
color: 'orange'
|
||
}
|
||
]
|
||
|
||
return (
|
||
<AuthLayout
|
||
title="Выберите тип кабинета"
|
||
description="Выберите кабинет для управления"
|
||
currentStep={3}
|
||
totalSteps={5}
|
||
stepName="Тип кабинета"
|
||
>
|
||
<div className="space-y-4">
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{cabinets.map((cabinet) => {
|
||
const IconComponent = cabinet.icon
|
||
return (
|
||
<button
|
||
key={cabinet.id}
|
||
onClick={() => onNext(cabinet.id)}
|
||
className="glass-card p-4 text-left transition-all hover:scale-[1.02] group relative h-full"
|
||
>
|
||
<div className="flex flex-col items-center text-center space-y-3">
|
||
<div className={`p-3 rounded-lg ${
|
||
cabinet.color === 'blue' ? 'bg-blue-500/20' :
|
||
cabinet.color === 'purple' ? 'bg-purple-500/20' :
|
||
cabinet.color === 'green' ? 'bg-green-500/20' :
|
||
'bg-orange-500/20'
|
||
}`}>
|
||
<IconComponent className="h-6 w-6 text-white" />
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<h3 className="text-sm font-semibold text-white">{cabinet.title}</h3>
|
||
<p className="text-white/70 text-xs">
|
||
{cabinet.description}
|
||
</p>
|
||
|
||
<div className="flex flex-wrap gap-1 justify-center">
|
||
{cabinet.features.slice(0, 2).map((feature, index) => (
|
||
<Badge
|
||
key={index}
|
||
variant="outline"
|
||
className="glass-secondary text-white/60 border-white/20 text-xs px-1 py-0"
|
||
>
|
||
{feature}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
|
||
<Button
|
||
type="button"
|
||
variant="glass-secondary"
|
||
onClick={onBack}
|
||
className="w-full flex items-center gap-2"
|
||
>
|
||
<ArrowLeft className="h-4 w-4" />
|
||
Назад
|
||
</Button>
|
||
</div>
|
||
</AuthLayout>
|
||
)
|
||
}
|