Страница бронирования
This commit is contained in:
parent
ec00216b93
commit
2383f75fe2
|
|
@ -1,6 +1,7 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { DatePicker } from "@/components/ui/date-picker";
|
import { DatePicker } from "@/components/ui/date-picker";
|
||||||
import { GuestPicker } from "@/components/form/guest-picker";
|
import { GuestPicker } from "@/components/form/guest-picker";
|
||||||
|
|
@ -10,6 +11,7 @@ interface BookingWidgetProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function BookingWidget({ price }: BookingWidgetProps) {
|
export function BookingWidget({ price }: BookingWidgetProps) {
|
||||||
|
const router = useRouter();
|
||||||
const [departureDate] = useState<Date | undefined>();
|
const [departureDate] = useState<Date | undefined>();
|
||||||
const [arrivalDate] = useState<Date | undefined>();
|
const [arrivalDate] = useState<Date | undefined>();
|
||||||
const [guests, setGuests] = useState({ adults: 1, children: 0 });
|
const [guests, setGuests] = useState({ adults: 1, children: 0 });
|
||||||
|
|
@ -26,6 +28,7 @@ export function BookingWidget({ price }: BookingWidgetProps) {
|
||||||
arrivalDate,
|
arrivalDate,
|
||||||
guests,
|
guests,
|
||||||
});
|
});
|
||||||
|
router.push("/confirm");
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -149,7 +149,9 @@ export default function CatalogPage() {
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-1 w-full sm:w-auto">
|
<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">
|
<Select defaultValue="default">
|
||||||
<SelectTrigger
|
<SelectTrigger
|
||||||
className="w-full"
|
className="w-full"
|
||||||
|
|
@ -181,8 +183,12 @@ export default function CatalogPage() {
|
||||||
{/* Yacht Grid */}
|
{/* Yacht Grid */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
{yachts.map((yacht, idx) => (
|
{yachts.map((yacht, idx) => (
|
||||||
<div key={idx} className="relative">
|
<Link
|
||||||
<Card className="overflow-hidden bg-white text-gray-900 border border-gray-200">
|
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">
|
<CardHeader className="p-0 relative">
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
{/* Quick Booking Badge */}
|
{/* Quick Booking Badge */}
|
||||||
|
|
@ -252,7 +258,7 @@ export default function CatalogPage() {
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -84,8 +84,12 @@ export default function YachtGrid() {
|
||||||
{/* Yacht Grid */}
|
{/* Yacht Grid */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
|
||||||
{yachts.map((yacht, idx) => (
|
{yachts.map((yacht, idx) => (
|
||||||
<div key={idx} className="relative">
|
<Link
|
||||||
<Card className="overflow-hidden bg-white text-gray-900">
|
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">
|
<CardHeader className="p-0 relative">
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
{/* Best Offer Badge - над карточкой */}
|
{/* Best Offer Badge - над карточкой */}
|
||||||
|
|
@ -169,7 +173,7 @@ export default function YachtGrid() {
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</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 (
|
return (
|
||||||
<html lang="ru">
|
<html lang="ru">
|
||||||
<body className={inter.className}>
|
<body className={`${inter.className} flex flex-col min-h-screen`}>
|
||||||
<Header />
|
<Header />
|
||||||
{children}
|
{children}
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue