Страница бронирования
This commit is contained in:
parent
ec00216b93
commit
2383f75fe2
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { DatePicker } from "@/components/ui/date-picker";
|
||||
import { GuestPicker } from "@/components/form/guest-picker";
|
||||
|
|
@ -10,6 +11,7 @@ interface BookingWidgetProps {
|
|||
}
|
||||
|
||||
export function BookingWidget({ price }: BookingWidgetProps) {
|
||||
const router = useRouter();
|
||||
const [departureDate] = useState<Date | undefined>();
|
||||
const [arrivalDate] = useState<Date | undefined>();
|
||||
const [guests, setGuests] = useState({ adults: 1, children: 0 });
|
||||
|
|
@ -26,6 +28,7 @@ export function BookingWidget({ price }: BookingWidgetProps) {
|
|||
arrivalDate,
|
||||
guests,
|
||||
});
|
||||
router.push("/confirm");
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -149,7 +149,9 @@ export default function CatalogPage() {
|
|||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 w-full sm:w-auto">
|
||||
<div className="text-base text-[#999999]">Сортировка:</div>
|
||||
<div className="text-base text-[#999999]">
|
||||
Сортировка:
|
||||
</div>
|
||||
<Select defaultValue="default">
|
||||
<SelectTrigger
|
||||
className="w-full"
|
||||
|
|
@ -181,8 +183,12 @@ export default function CatalogPage() {
|
|||
{/* Yacht Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{yachts.map((yacht, idx) => (
|
||||
<div key={idx} className="relative">
|
||||
<Card className="overflow-hidden bg-white text-gray-900 border border-gray-200">
|
||||
<Link
|
||||
key={idx}
|
||||
href={`/catalog/${idx + 1}`}
|
||||
className="block"
|
||||
>
|
||||
<Card className="overflow-hidden bg-white text-gray-900 border border-gray-200 cursor-pointer transition-all duration-200 hover:shadow-lg">
|
||||
<CardHeader className="p-0 relative">
|
||||
<div className="relative">
|
||||
{/* Quick Booking Badge */}
|
||||
|
|
@ -252,7 +258,7 @@ export default function CatalogPage() {
|
|||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -84,8 +84,12 @@ export default function YachtGrid() {
|
|||
{/* Yacht Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
|
||||
{yachts.map((yacht, idx) => (
|
||||
<div key={idx} className="relative">
|
||||
<Card className="overflow-hidden bg-white text-gray-900">
|
||||
<Link
|
||||
key={idx}
|
||||
href={`/catalog/${idx + 1}`}
|
||||
className="block"
|
||||
>
|
||||
<Card className="overflow-hidden bg-white text-gray-900 cursor-pointer transition-all duration-200 hover:shadow-lg">
|
||||
<CardHeader className="p-0 relative">
|
||||
<div className="relative">
|
||||
{/* Best Offer Badge - над карточкой */}
|
||||
|
|
@ -169,7 +173,7 @@ export default function YachtGrid() {
|
|||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,206 @@
|
|||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { User, ArrowUpRight, Map } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ConfirmPage() {
|
||||
const [promocode, setPromocode] = useState("");
|
||||
|
||||
return (
|
||||
<main className="bg-[#f4f4f4] grow">
|
||||
<div className="container max-w-6xl mx-auto px-4 py-6">
|
||||
{/* Breadcrumbs */}
|
||||
<div className="mb-6 text-sm text-[#999999] flex items-center gap-[16px]">
|
||||
<Link href="/">
|
||||
<span className="cursor-pointer hover:text-[#333333] transition-colors">
|
||||
Аренда яхты
|
||||
</span>
|
||||
</Link>
|
||||
<span>></span>
|
||||
<span className="text-[#333333]">Ваше бронирование</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Левая колонка - Информация о яхте и ценах */}
|
||||
<div className="w-full lg:w-[336px] flex-shrink-0 flex flex-col gap-6">
|
||||
<div className="bg-white rounded-[16px]">
|
||||
<div className="p-4">
|
||||
{/* Изображение яхты */}
|
||||
<div className="relative mb-5">
|
||||
<Image
|
||||
src="/images/yachts/yacht1.jpg"
|
||||
alt="Яхта"
|
||||
width={400}
|
||||
height={250}
|
||||
className="w-full h-48 object-cover rounded-[8px]"
|
||||
/>
|
||||
{/* Плашка владельца */}
|
||||
<div className="absolute top-2 left-2">
|
||||
<div className="bg-white backdrop-blur-sm px-4 py-2 rounded-[8px] flex items-center gap-2">
|
||||
<User
|
||||
size={22}
|
||||
className="text-[#999999]"
|
||||
/>
|
||||
<div className="flex flex-col gap-[4px]">
|
||||
<span className="text-[#999999]">
|
||||
Владелец
|
||||
</span>
|
||||
<span className="text-[#333333] font-bold">
|
||||
Денис
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Название яхты */}
|
||||
<h3 className="text-base text-[#333333] pb-3 border-b border-[#DFDFDF] mb-4">
|
||||
Яхта
|
||||
</h3>
|
||||
|
||||
{/* Детализация цены */}
|
||||
<div>
|
||||
<h4 className="text-base font-bold text-[#333333] mb-4">
|
||||
Детализация цены
|
||||
</h4>
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<span className="text-[#333333]">
|
||||
26 400₽ x 2ч
|
||||
</span>
|
||||
<span className="text-[#333333]">
|
||||
52 800 ₽
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center border-b border-[#DFDFDF] pb-4 mb-4">
|
||||
<span className="text-[#333333]">
|
||||
Услуги
|
||||
</span>
|
||||
<span className="text-[#333333]">
|
||||
0 Р
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[#333333]">
|
||||
Итого:
|
||||
</span>
|
||||
<span className="text-[#333333] font-bold">
|
||||
52 800 Р
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-[16px]">
|
||||
<div className="p-6">
|
||||
{/* Промокод */}
|
||||
<div className="w-full flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Промокод"
|
||||
value={promocode}
|
||||
onChange={(e) =>
|
||||
setPromocode(e.target.value)
|
||||
}
|
||||
className="flex-1 min-w-0 px-4 sm:px-8 py-5 h-[64px] border border-[#DFDFDF] rounded-full text-base text-[#757575] focus:outline-none focus:ring-2 focus:ring-[#008299] focus:border-transparent"
|
||||
/>
|
||||
<Button
|
||||
variant="default"
|
||||
className="flex-shrink-0 h-[64px] w-[64px] bg-[#2D908D] hover:bg-[#007088] text-white rounded-full p-0 transition-colors duration-200"
|
||||
>
|
||||
<ArrowUpRight size={12} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Правая колонка - Подтверждение бронирования */}
|
||||
<div className="flex-1">
|
||||
<div className="bg-white rounded-[16px]">
|
||||
<div className="p-8">
|
||||
{/* Заголовок */}
|
||||
<h1 className="text-2xl text-[#333333] mb-4">
|
||||
Проверьте данные
|
||||
</h1>
|
||||
<h2 className="text-base text-[#333333] font-bold mb-4">
|
||||
Ваше бронирование
|
||||
</h2>
|
||||
|
||||
{/* Сведения о бронировании */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-4">
|
||||
{/* Даты */}
|
||||
<div className="grow-1 border border-[#DFDFDF] rounded-[8px] p-4">
|
||||
<div className="text-[#333333] mb-1">
|
||||
Даты
|
||||
</div>
|
||||
<div className="text-base text-[#999999]">
|
||||
9 августа в 00:00 — 9 августа в
|
||||
02:00
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Гости */}
|
||||
<div className="grow-1 border border-[#DFDFDF] rounded-[8px] p-4">
|
||||
<div>
|
||||
<div className="text-[#333333] mb-1">
|
||||
Гости
|
||||
</div>
|
||||
<div className="text-base text-[#999999]">
|
||||
1 гость
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Дополнительные услуги */}
|
||||
<div className="flex items-center h-[88px] border border-[#DFDFDF] rounded-[8px] p-4 mb-6">
|
||||
<div className="text-base text-[#333333]">
|
||||
Нет дополнительных услуг
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Правила отмены */}
|
||||
<h3 className="text-base font-bold text-[#333333] mb-4">
|
||||
Правила отмены
|
||||
</h3>
|
||||
|
||||
<p className="text-[#333333]">
|
||||
При отмене до 10 мая вы получите частичный
|
||||
возврат.
|
||||
</p>
|
||||
<Link
|
||||
href="#"
|
||||
className="text-[#2D908D] hover:text-[#007088] font-bold transition-colors"
|
||||
>
|
||||
Подробнее
|
||||
</Link>
|
||||
|
||||
{/* Указание времени и кнопка отправки */}
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mt-6">
|
||||
<div className="flex items-center gap-2 text-sm text-[#666666]">
|
||||
<Map size={20} />
|
||||
<span className="text-[#333333]">
|
||||
По местному времени яхты
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="default"
|
||||
size="lg"
|
||||
className="flex-shrink-0 h-[64px] w-[270px] bg-[#2D908D] hover:bg-[#007088] text-white font-bold rounded-full p-0 transition-colors duration-200 hover:shadow-lg"
|
||||
>
|
||||
Отправить заявку
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@ export default function RootLayout({
|
|||
}>) {
|
||||
return (
|
||||
<html lang="ru">
|
||||
<body className={inter.className}>
|
||||
<body className={`${inter.className} flex flex-col min-h-screen`}>
|
||||
<Header />
|
||||
{children}
|
||||
<Footer />
|
||||
|
|
|
|||
Loading…
Reference in New Issue