69 lines
3.0 KiB
TypeScript
69 lines
3.0 KiB
TypeScript
import { CalendarDaysIcon } from "lucide-react";
|
||
|
||
import { bookingRules } from "@/entities/site-content";
|
||
import { Badge } from "@/shared/ui/badge";
|
||
import { Button } from "@/shared/ui/button";
|
||
import { Container } from "@/shared/ui/container";
|
||
import { InfoColumns } from "@/shared/ui/info-columns";
|
||
import { InnerHero } from "@/shared/ui/inner-hero";
|
||
import { Input } from "@/shared/ui/input";
|
||
import { Textarea } from "@/shared/ui/textarea";
|
||
import { RestaurantEveningPlan } from "@/widgets/restaurant-evening-plan";
|
||
import { SeatingGuide } from "@/widgets/seating-guide";
|
||
|
||
function ReservationForm() {
|
||
return (
|
||
<Container className="grid gap-8 py-14 lg:grid-cols-[0.82fr_1.18fr]">
|
||
<div>
|
||
<Badge variant="outline" className="mb-5 rounded-md">
|
||
<CalendarDaysIcon className="size-4" />
|
||
booking flow
|
||
</Badge>
|
||
<h2 className="font-display text-4xl font-semibold sm:text-5xl">Бронь уточняет сценарий вечера</h2>
|
||
<p className="mt-4 text-sm leading-7 text-muted-foreground">
|
||
Форма статическая, но показывает production-ready сценарий: дата, время, гости, посадка, аллергии, событие и пожелания к темпу.
|
||
</p>
|
||
</div>
|
||
<form className="grid gap-4 rounded-md border border-border bg-card p-5">
|
||
<div className="grid gap-3 sm:grid-cols-2">
|
||
<Input placeholder="Имя" />
|
||
<Input placeholder="Телефон" />
|
||
<Input placeholder="Дата" />
|
||
<Input placeholder="Время" />
|
||
<Input placeholder="Количество гостей" />
|
||
<Input placeholder="Формат посадки" />
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
{["chef counter", "dining room", "private room", "tasting", "birthday"].map((tag) => (
|
||
<button key={tag} type="button" className="rounded-md border border-border bg-background px-3 py-2 text-sm font-medium text-muted-foreground">
|
||
{tag}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<Textarea placeholder="Аллергии, dietary requests, детский стул, событие или пожелания к темпу вечера" />
|
||
<Button type="button" className="h-11 rounded-md">Отправить заявку хосту</Button>
|
||
</form>
|
||
</Container>
|
||
);
|
||
}
|
||
|
||
function ReservationRules() {
|
||
return <InfoColumns title="Правила бронирования" items={bookingRules} />;
|
||
}
|
||
|
||
export function ReservationsPage() {
|
||
return (
|
||
<>
|
||
<InnerHero
|
||
eyebrow="Reservations"
|
||
title="Бронь уточняет формат вечера, посадку и ограничения"
|
||
text="Production-ready booking UI для ресторана: гости, время, посадка, событие, аллергии и правила подтверждения."
|
||
/>
|
||
<SeatingGuide />
|
||
<ReservationForm />
|
||
<ReservationRules />
|
||
<RestaurantEveningPlan />
|
||
</>
|
||
);
|
||
}
|