страницы профиля
This commit is contained in:
Sergey Bolshakov
parent
b45f9885ab
commit
d177eee970
|
|
@ -0,0 +1,55 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface MenuItem {
|
||||
label: string;
|
||||
href: string;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
const menuItems: MenuItem[] = [
|
||||
{ label: "Дашборд", href: "/profile/dashboard" },
|
||||
{ label: "Мои яхты", href: "/profile/yachts" },
|
||||
{ label: "Мои брони", href: "/profile/reservations" },
|
||||
{ label: "Заказы", href: "/profile/orders" },
|
||||
{ label: "Календарь", href: "/profile/calendar" },
|
||||
{ label: "Избранное", href: "/profile/favorites" },
|
||||
{ label: "Аккаунт", href: "/profile/account" },
|
||||
{ label: "Выйти", href: "/profile/logout" },
|
||||
];
|
||||
|
||||
export default function ProfileSidebar() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<aside className="w-[292px] bg-white h-min rounded-[16px] flex-shrink-0 bg-[#f4f4f4]">
|
||||
<nav>
|
||||
<ul>
|
||||
{menuItems.map((item) => {
|
||||
const isActive = pathname === item.href ||
|
||||
(item.href === "/profile/yachts" && pathname?.startsWith("/profile/yachts"));
|
||||
|
||||
return (
|
||||
<li key={item.href}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className={cn(
|
||||
"block p-6 border-b border-[#EDEDED] font-regular text-sm",
|
||||
isActive
|
||||
? "text-[#2D908D]"
|
||||
: "text-[#333333]"
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,286 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import ProfileSidebar from "@/app/profile/components/ProfileSidebar";
|
||||
import { User, Clock, MoveHorizontal, Users } from "lucide-react";
|
||||
|
||||
interface Reservation {
|
||||
id: string;
|
||||
yachtName: string;
|
||||
yachtImage: string;
|
||||
ownerName: string;
|
||||
ownerAvatar?: string;
|
||||
length: number;
|
||||
capacity: number;
|
||||
departureDate: string;
|
||||
departureTime: string;
|
||||
arrivalDate: string;
|
||||
arrivalTime: string;
|
||||
guests: number;
|
||||
paymentType: string;
|
||||
totalPrice: number;
|
||||
paymentStatus: "pending" | "paid" | "confirmed";
|
||||
}
|
||||
|
||||
// Моковые данные для демонстрации
|
||||
const mockReservations: Record<string, Reservation[]> = {
|
||||
new: [
|
||||
{
|
||||
id: "1",
|
||||
yachtName: "KALLISTE",
|
||||
yachtImage: "/images/yachts/yacht1.jpg",
|
||||
ownerName: "Денис",
|
||||
length: 14,
|
||||
capacity: 10,
|
||||
departureDate: "9 Авг, 2025",
|
||||
departureTime: "00:00",
|
||||
arrivalDate: "9 Авг, 2025",
|
||||
arrivalTime: "02:00",
|
||||
guests: 1,
|
||||
paymentType: "Полная оплата",
|
||||
totalPrice: 52800,
|
||||
paymentStatus: "pending",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
yachtName: "Señorita",
|
||||
yachtImage: "/images/yachts/yacht2.jpg",
|
||||
ownerName: "Денис",
|
||||
length: 14,
|
||||
capacity: 10,
|
||||
departureDate: "17 Авг, 2025",
|
||||
departureTime: "00:00",
|
||||
arrivalDate: "17 Авг, 2025",
|
||||
arrivalTime: "03:00",
|
||||
guests: 1,
|
||||
paymentType: "Полная оплата",
|
||||
totalPrice: 75240,
|
||||
paymentStatus: "pending",
|
||||
},
|
||||
],
|
||||
active: [],
|
||||
confirmed: [],
|
||||
archive: [],
|
||||
};
|
||||
|
||||
export default function ReservationsPage() {
|
||||
const [activeTab, setActiveTab] = useState<"new" | "active" | "confirmed" | "archive">("new");
|
||||
const reservations = mockReservations[activeTab];
|
||||
|
||||
const formatPrice = (price: number): string => {
|
||||
return new Intl.NumberFormat("ru-RU").format(price) + " Р";
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="bg-[#f4f4f4]">
|
||||
<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>
|
||||
<span className="text-[#333333]">Мои брони</span>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-6">
|
||||
{/* Sidebar */}
|
||||
<ProfileSidebar />
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 bg-white rounded-[16px] p-8">
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-2 mb-6">
|
||||
<button
|
||||
onClick={() => setActiveTab("new")}
|
||||
className={`px-4 py-2 text-sm font-medium rounded-full border transition-colors ${activeTab === "new"
|
||||
? "border-[#333333] bg-white text-[#333333] font-bold"
|
||||
: "border-transparent text-[#999999] hover:text-[#333333]"
|
||||
}`}
|
||||
>
|
||||
Новые брони ({mockReservations.new.length})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("active")}
|
||||
className={`px-4 py-2 text-sm font-medium rounded-full border transition-colors ${activeTab === "active"
|
||||
? "border-[#333333] bg-white text-[#333333] font-bold"
|
||||
: "border-transparent text-[#999999] hover:text-[#333333]"
|
||||
}`}
|
||||
>
|
||||
Активные
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("confirmed")}
|
||||
className={`px-4 py-2 text-sm font-medium rounded-full border transition-colors ${activeTab === "confirmed"
|
||||
? "border-[#333333] bg-white text-[#333333] font-bold"
|
||||
: "border-transparent text-[#999999] hover:text-[#333333]"
|
||||
}`}
|
||||
>
|
||||
Подтвержденные
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("archive")}
|
||||
className={`px-4 py-2 text-sm font-medium rounded-full border transition-colors ${activeTab === "archive"
|
||||
? "border-[#333333] bg-white text-[#333333] font-bold"
|
||||
: "border-transparent text-[#999999] hover:text-[#333333]"
|
||||
}`}
|
||||
>
|
||||
Архив
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Reservations List */}
|
||||
<div className="space-y-8">
|
||||
{reservations.length === 0 ? (
|
||||
<div className="text-center py-12 text-[#999999]">
|
||||
Нет бронирований в этой категории
|
||||
</div>
|
||||
) : (
|
||||
reservations.map((reservation, index) => (
|
||||
<div
|
||||
key={reservation.id}
|
||||
className={`overflow-hidden bg-white ${index !== reservations.length - 1 ? 'pb-8 border-b border-gray-200' : ''}`}
|
||||
>
|
||||
<div>
|
||||
<div className="flex flex-col lg:flex-row">
|
||||
{/* Image Section */}
|
||||
<div className="relative rounded-[12px] overflow-hidden w-90 h-90 flex-shrink-0">
|
||||
<Image
|
||||
src={reservation.yachtImage}
|
||||
alt={reservation.yachtName}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
{/* Owner Info Overlay */}
|
||||
<div className="absolute top-2 left-2">
|
||||
<div className="bg-white p-2 rounded-[8px] flex items-center gap-2">
|
||||
<User
|
||||
size={20}
|
||||
className="text-[#999999]"
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs text-[#999999]">
|
||||
Владелец
|
||||
</span>
|
||||
<span className="text-sm text-[#333333] font-bold">
|
||||
{reservation.ownerName}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Yacht Details Overlay */}
|
||||
<div className="absolute bottom-2 left-2 flex gap-2">
|
||||
<div className="bg-black/50 text-white px-3 py-1.5 rounded-lg flex items-center gap-3 text-sm">
|
||||
<div className="flex items-center gap-1">
|
||||
<MoveHorizontal
|
||||
size={16}
|
||||
className="text-white"
|
||||
/>
|
||||
<span>
|
||||
{reservation.length} метров
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-black/50 text-white px-3 py-1.5 rounded-lg flex items-center gap-3 text-sm">
|
||||
<div className="flex items-center gap-1">
|
||||
<Users
|
||||
size={16}
|
||||
className="text-white"
|
||||
/>
|
||||
<span>{reservation.capacity}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Details Section */}
|
||||
<div className="flex-1 px-6">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-3 w-full">
|
||||
<div className="text-[#333333] w-full flex justify-between">
|
||||
<div>
|
||||
Выход:
|
||||
</div>
|
||||
<div>
|
||||
{reservation.departureDate} -{" "}
|
||||
{reservation.departureTime}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[#333333] w-full flex justify-between">
|
||||
<div>
|
||||
Заход:
|
||||
</div>
|
||||
<div>
|
||||
{reservation.arrivalDate} -{" "}
|
||||
{reservation.arrivalTime}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[#333333] w-full flex justify-between">
|
||||
<div>
|
||||
Гости:
|
||||
</div>
|
||||
<div>
|
||||
{reservation.guests}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[#333333] w-full flex justify-between">
|
||||
<div>
|
||||
Тип оплаты:
|
||||
</div>
|
||||
<div>
|
||||
{reservation.paymentType}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-[#333333]">
|
||||
<Clock
|
||||
size={16}
|
||||
className="text-[#999999]"
|
||||
/>
|
||||
<span>
|
||||
По местному времени яхты
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-3 border-t border-[#DFDFDF]">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-base font-bold text-[#333333]">
|
||||
Итого:{" "}
|
||||
{formatPrice(
|
||||
reservation.totalPrice
|
||||
)}{" "}{reservation.paymentStatus ===
|
||||
"pending" && (
|
||||
<span className="text-base font-bold text-red-500">
|
||||
(в ожидании оплаты)
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,525 @@
|
|||
"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>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import * as React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface InputProps
|
||||
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
({ className, type, ...props }, ref) => {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#008299] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
Input.displayName = "Input";
|
||||
|
||||
export { Input };
|
||||
Loading…
Reference in New Issue