526 lines
28 KiB
TypeScript
526 lines
28 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import Link from "next/link";
|
||
import ProfileSidebar from "@/app/profile/components/ProfileSidebar";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Input } from "@/components/ui/input";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select";
|
||
import { Checkbox } from "@/components/ui/checkbox";
|
||
import { Label } from "@/components/ui/label";
|
||
import { Info, X, Plus, Minus } from "lucide-react";
|
||
|
||
interface Cabin {
|
||
id: string;
|
||
name: string;
|
||
count: number;
|
||
type: string;
|
||
}
|
||
|
||
export default function AddYachtPage() {
|
||
const [cabins, setCabins] = useState<Cabin[]>([
|
||
{ id: "1", name: "Мастер Каюта", count: 1, type: "Односпальная" },
|
||
{ id: "2", name: "Гостевая каюта 1", count: 1, type: "" },
|
||
]);
|
||
|
||
const addCabin = () => {
|
||
const newCabin: Cabin = {
|
||
id: Date.now().toString(),
|
||
name: `Гостевая каюта ${cabins.length}`,
|
||
count: 1,
|
||
type: "",
|
||
};
|
||
setCabins([...cabins, newCabin]);
|
||
};
|
||
|
||
const removeCabin = (id: string) => {
|
||
setCabins(cabins.filter((cabin) => cabin.id !== id));
|
||
};
|
||
|
||
const updateCabinCount = (id: string, delta: number) => {
|
||
setCabins(
|
||
cabins.map((cabin) =>
|
||
cabin.id === id
|
||
? { ...cabin, count: Math.max(1, cabin.count + delta) }
|
||
: cabin
|
||
)
|
||
);
|
||
};
|
||
|
||
const updateCabinType = (id: string, type: string) => {
|
||
setCabins(
|
||
cabins.map((cabin) =>
|
||
cabin.id === id ? { ...cabin, type } : cabin
|
||
)
|
||
);
|
||
};
|
||
|
||
return (
|
||
<main className="bg-[#f4f4f4] min-h-screen">
|
||
<div className="container max-w-6xl mx-auto px-4 py-6">
|
||
{/* Breadcrumbs */}
|
||
<div className="hidden lg:flex mb-4 text-sm text-[#999999] items-center gap-[16px]">
|
||
<Link href="/">
|
||
<span className="cursor-pointer hover:text-[#333333] transition-colors">
|
||
Аренда яхты
|
||
</span>
|
||
</Link>
|
||
<span>></span>
|
||
<Link href="/profile">
|
||
<span className="cursor-pointer hover:text-[#333333] transition-colors">
|
||
Личный кабинет
|
||
</span>
|
||
</Link>
|
||
<span>></span>
|
||
<Link href="/profile/yachts">
|
||
<span className="cursor-pointer hover:text-[#333333] transition-colors">
|
||
Мои яхты
|
||
</span>
|
||
</Link>
|
||
<span>></span>
|
||
<span className="text-[#333333]">Добавление яхты</span>
|
||
</div>
|
||
|
||
<div className="flex gap-6">
|
||
{/* Sidebar */}
|
||
<ProfileSidebar />
|
||
|
||
{/* Main Content */}
|
||
<div className="flex-1 bg-white rounded-lg p-8">
|
||
<h1 className="text-2xl font-bold text-[#333333] mb-8">
|
||
Добавление яхты
|
||
</h1>
|
||
|
||
{/* Выберите тип судна */}
|
||
<div className="mb-6">
|
||
<Label className="text-sm font-medium text-[#333333] mb-2 block">
|
||
Выберите тип судна*
|
||
</Label>
|
||
<Select>
|
||
<SelectTrigger className="w-full h-12 rounded-lg">
|
||
<SelectValue placeholder="Выберите тип судна" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="motor">Моторная яхта</SelectItem>
|
||
<SelectItem value="sail">Парусная яхта</SelectItem>
|
||
<SelectItem value="catamaran">Катамаран</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
{/* Основная информация */}
|
||
<div className="mb-8">
|
||
<h2 className="text-lg font-bold text-[#333333] mb-4">
|
||
Основная информация*
|
||
</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||
<div>
|
||
<Label className="text-sm font-medium text-[#333333] mb-2 block">
|
||
Название судна*
|
||
</Label>
|
||
<Input
|
||
placeholder="Название судна"
|
||
className="h-12"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label className="text-sm font-medium text-[#333333] mb-2 block">
|
||
Верфь*
|
||
</Label>
|
||
<Input placeholder="Верфь" className="h-12" />
|
||
</div>
|
||
<div>
|
||
<Label className="text-sm font-medium text-[#333333] mb-2 block">
|
||
Модель*
|
||
</Label>
|
||
<Select>
|
||
<SelectTrigger className="w-full h-12 rounded-lg">
|
||
<SelectValue placeholder="Модель" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="model1">Модель 1</SelectItem>
|
||
<SelectItem value="model2">Модель 2</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<Label className="text-sm font-medium text-[#333333] mb-2 block">
|
||
Выберите марину*
|
||
</Label>
|
||
<Select>
|
||
<SelectTrigger className="w-full h-12 rounded-lg">
|
||
<SelectValue placeholder="Выберите марину" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="marina1">Марина 1</SelectItem>
|
||
<SelectItem value="marina2">Марина 2</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Прибыль и время аренды */}
|
||
<div className="mb-8">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<Label className="text-sm font-medium text-[#333333] mb-2 block">
|
||
Прибыль (за час)*
|
||
</Label>
|
||
<div className="relative">
|
||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-[#333333]">
|
||
$
|
||
</span>
|
||
<Input
|
||
placeholder="Прибыль (за час)"
|
||
className="h-12 pl-8 pr-10"
|
||
/>
|
||
<Info className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#999999]" />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<Label className="text-sm font-medium text-[#333333] mb-2 block">
|
||
Минимальное время аренды (в часах)*
|
||
</Label>
|
||
<Input
|
||
placeholder="Минимальное время (в часах)"
|
||
className="h-12"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Тип оплаты */}
|
||
<div className="mb-8">
|
||
<h2 className="text-lg font-bold text-[#333333] mb-4">
|
||
Тип оплаты
|
||
</h2>
|
||
<div className="space-y-3">
|
||
<div className="flex items-center gap-3">
|
||
<Checkbox id="yookassa" />
|
||
<Label
|
||
htmlFor="yookassa"
|
||
className="flex-1 cursor-pointer flex items-center justify-between"
|
||
>
|
||
<span>Оплата через Yookassa</span>
|
||
<Info className="h-4 w-4 text-[#999999]" />
|
||
</Label>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<Checkbox id="prepayment" defaultChecked />
|
||
<Label
|
||
htmlFor="prepayment"
|
||
className="flex-1 cursor-pointer flex items-center justify-between"
|
||
>
|
||
<span>Предоплата</span>
|
||
<Info className="h-4 w-4 text-[#999999]" />
|
||
</Label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Промоцены */}
|
||
<div className="mb-8">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h2 className="text-lg font-bold text-[#333333]">
|
||
Промоцены
|
||
</h2>
|
||
<Button variant="outline" size="sm">
|
||
Добавить промоцену
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Синхронизация Google Календаря */}
|
||
<div className="mb-8">
|
||
<Label className="text-sm font-medium text-[#333333] mb-2 block">
|
||
ID Google Календаря для синхронизации
|
||
</Label>
|
||
<Input
|
||
placeholder="ID Google Календаря"
|
||
className="h-12"
|
||
/>
|
||
</div>
|
||
|
||
{/* Загрузка изображений */}
|
||
<div className="mb-8">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<Label className="text-sm font-medium text-[#333333]">
|
||
Загрузите изображения судна (в высоком разрешении)*
|
||
</Label>
|
||
<Button variant="outline" size="sm">
|
||
Загрузить
|
||
</Button>
|
||
</div>
|
||
<div className="border-2 border-dashed border-[#999999] rounded-lg p-12 text-center">
|
||
<div className="flex flex-col items-center gap-4">
|
||
<div className="w-16 h-16 bg-[#f4f4f4] rounded-lg flex items-center justify-center">
|
||
<svg
|
||
width="32"
|
||
height="32"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="2"
|
||
>
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
||
<polyline points="17 8 12 3 7 8" />
|
||
<line x1="12" y1="3" x2="12" y2="15" />
|
||
</svg>
|
||
</div>
|
||
<p className="text-sm text-[#333333]">
|
||
Загрузите изображения судна (в высоком разрешении)*
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Характеристики */}
|
||
<div className="mb-8">
|
||
<h2 className="text-lg font-bold text-[#333333] mb-4">
|
||
Характеристики*
|
||
</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<Label className="text-sm font-medium text-[#333333] mb-2 block">
|
||
Год*
|
||
</Label>
|
||
<Input placeholder="Год" className="h-12" />
|
||
</div>
|
||
<div>
|
||
<Label className="text-sm font-medium text-[#333333] mb-2 block">
|
||
Мощность (л/с)
|
||
</Label>
|
||
<Input placeholder="Мощность (л/с)" className="h-12" />
|
||
</div>
|
||
<div>
|
||
<Label className="text-sm font-medium text-[#333333] mb-2 block">
|
||
Длина (м)*
|
||
</Label>
|
||
<Input placeholder="Длина (м)" className="h-12" />
|
||
</div>
|
||
<div>
|
||
<Label className="text-sm font-medium text-[#333333] mb-2 block">
|
||
Ширина (м)
|
||
</Label>
|
||
<Input placeholder="Ширина (м)" className="h-12" />
|
||
</div>
|
||
<div>
|
||
<Label className="text-sm font-medium text-[#333333] mb-2 block">
|
||
Макс. вместимость (без экипажа)*
|
||
</Label>
|
||
<Input
|
||
placeholder="Макс. вместимость (без экипажа)"
|
||
className="h-12"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label className="text-sm font-medium text-[#333333] mb-2 block">
|
||
Комфортная вместимость (человек)*
|
||
</Label>
|
||
<Input
|
||
placeholder="Комфортная вместимость (человек)"
|
||
className="h-12"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label className="text-sm font-medium text-[#333333] mb-2 block">
|
||
Каюты
|
||
</Label>
|
||
<Input placeholder="Каюты" className="h-12" />
|
||
</div>
|
||
<div>
|
||
<Label className="text-sm font-medium text-[#333333] mb-2 block">
|
||
Материал
|
||
</Label>
|
||
<Select>
|
||
<SelectTrigger className="w-full h-12 rounded-lg">
|
||
<SelectValue placeholder="Материал" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="fiberglass">Стеклопластик</SelectItem>
|
||
<SelectItem value="aluminum">Алюминий</SelectItem>
|
||
<SelectItem value="steel">Сталь</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Удобства */}
|
||
<div className="mb-8">
|
||
<h2 className="text-lg font-bold text-[#333333] mb-4">
|
||
Удобства
|
||
</h2>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||
{/* Здесь будут чекбоксы для удобств */}
|
||
<div className="flex items-center gap-2">
|
||
<Checkbox id="wifi" />
|
||
<Label htmlFor="wifi" className="cursor-pointer">
|
||
Wi-Fi
|
||
</Label>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Checkbox id="aircon" />
|
||
<Label htmlFor="aircon" className="cursor-pointer">
|
||
Кондиционер
|
||
</Label>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Checkbox id="kitchen" />
|
||
<Label htmlFor="kitchen" className="cursor-pointer">
|
||
Кухня
|
||
</Label>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Checkbox id="toilet" />
|
||
<Label htmlFor="toilet" className="cursor-pointer">
|
||
Туалет
|
||
</Label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Описание */}
|
||
<div className="mb-8">
|
||
<div className="flex items-center gap-2 mb-4">
|
||
<h2 className="text-lg font-bold text-[#333333]">
|
||
Описание (5000)
|
||
</h2>
|
||
<Info className="h-4 w-4 text-[#999999]" />
|
||
</div>
|
||
<textarea
|
||
placeholder="Введите описание"
|
||
className="w-full h-32 p-4 border border-gray-300 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-[#008299]"
|
||
/>
|
||
</div>
|
||
|
||
{/* Добавить каюты */}
|
||
<div className="mb-8">
|
||
<h2 className="text-lg font-bold text-[#333333] mb-4">
|
||
Добавить каюты
|
||
</h2>
|
||
<div className="space-y-3 mb-4">
|
||
{cabins.map((cabin) => (
|
||
<div
|
||
key={cabin.id}
|
||
className="flex items-center gap-4 p-4 border border-gray-200 rounded-lg"
|
||
>
|
||
<button
|
||
onClick={() => removeCabin(cabin.id)}
|
||
className="text-[#999999] hover:text-[#333333]"
|
||
>
|
||
<X className="h-5 w-5" />
|
||
</button>
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
onClick={() =>
|
||
updateCabinCount(cabin.id, -1)
|
||
}
|
||
className="w-8 h-8 flex items-center justify-center border border-gray-300 rounded"
|
||
>
|
||
<Minus className="h-4 w-4" />
|
||
</button>
|
||
<span className="w-8 text-center">
|
||
{cabin.count}
|
||
</span>
|
||
<button
|
||
onClick={() =>
|
||
updateCabinCount(cabin.id, 1)
|
||
}
|
||
className="w-8 h-8 flex items-center justify-center border border-gray-300 rounded"
|
||
>
|
||
<Plus className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
<span className="flex-1 font-medium">
|
||
{cabin.name}
|
||
</span>
|
||
<Select
|
||
value={cabin.type}
|
||
onValueChange={(value) =>
|
||
updateCabinType(cabin.id, value)
|
||
}
|
||
>
|
||
<SelectTrigger className="w-48 rounded-lg">
|
||
<SelectValue
|
||
placeholder="Выберите..."
|
||
/>
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="Односпальная">
|
||
Односпальная
|
||
</SelectItem>
|
||
<SelectItem value="Двуспальная">
|
||
Двуспальная
|
||
</SelectItem>
|
||
<SelectItem value="Двухъярусная">
|
||
Двухъярусная
|
||
</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<Button
|
||
variant="outline"
|
||
onClick={addCabin}
|
||
className="bg-[#333333] text-white hover:bg-[#444444] border-[#333333]"
|
||
>
|
||
Добавить каюту
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Услуги на яхте */}
|
||
<div className="mb-8">
|
||
<h2 className="text-lg font-bold text-[#333333] mb-4">
|
||
Какие есть услуги на вашей яхте?
|
||
</h2>
|
||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||
<div className="flex items-center gap-2">
|
||
<Checkbox id="service1" />
|
||
<Label htmlFor="service1" className="cursor-pointer">
|
||
Капитан
|
||
</Label>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Checkbox id="service2" />
|
||
<Label htmlFor="service2" className="cursor-pointer">
|
||
Повар
|
||
</Label>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Checkbox id="service3" />
|
||
<Label htmlFor="service3" className="cursor-pointer">
|
||
Стюард
|
||
</Label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Кнопки внизу */}
|
||
<div className="flex items-center justify-between pt-6 border-t border-gray-200">
|
||
<Button variant="outline" size="lg">
|
||
Режим предпросмотра
|
||
</Button>
|
||
<Button
|
||
variant="gradient"
|
||
size="lg"
|
||
className="bg-[#008299] hover:bg-[#006d7a] text-white"
|
||
>
|
||
Добавить судно
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
);
|
||
}
|