80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
'use client';
|
|
import { OrderContext } from '@/context/order';
|
|
import { Button } from '@repo/ui/components/ui/button';
|
|
import { Calendar } from '@repo/ui/components/ui/calendar';
|
|
import dayjs, { type Dayjs } from 'dayjs';
|
|
import { use } from 'react';
|
|
|
|
type TimeSlotsProps = {
|
|
endTime?: string;
|
|
interval?: number;
|
|
startTime?: string;
|
|
};
|
|
export function DateSelect() {
|
|
const { date: selectedDate, setDate } = use(OrderContext);
|
|
|
|
return (
|
|
<Calendar
|
|
className="bg-background"
|
|
disabled={(date) => {
|
|
return dayjs().isAfter(dayjs(date), 'day');
|
|
}}
|
|
mode="single"
|
|
onSelect={(date) => {
|
|
if (date) setDate(date);
|
|
}}
|
|
selected={selectedDate}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const generateTimeSlots = (start: string, end: string, interval: number): Dayjs[] => {
|
|
const times: Dayjs[] = [];
|
|
let currentTime = dayjs(start, 'HH:mm');
|
|
const endTime = dayjs(end, 'HH:mm');
|
|
|
|
while (currentTime.isBefore(endTime) || currentTime.isSame(endTime)) {
|
|
times.push(currentTime);
|
|
currentTime = currentTime.add(interval, 'minute');
|
|
}
|
|
|
|
return times;
|
|
};
|
|
|
|
export function TimeSelect({
|
|
endTime = '2025-03-10T20:00:00',
|
|
interval = 30,
|
|
startTime = '2025-03-10T09:00:00',
|
|
}: Readonly<TimeSlotsProps>) {
|
|
const timeSlots = generateTimeSlots(startTime, endTime, interval);
|
|
|
|
const morning = timeSlots.filter((time) => time.hour() < 12);
|
|
const afternoon = timeSlots.filter((time) => time.hour() >= 12 && time.hour() < 18);
|
|
const evening = timeSlots.filter((time) => time.hour() >= 18);
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<TimeSlotsButtons times={morning} title="Утро" />
|
|
<TimeSlotsButtons times={afternoon} title="День" />
|
|
<TimeSlotsButtons times={evening} title="Вечер" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TimeSlotsButtons({ times, title }: Readonly<{ times: Dayjs[]; title: string }>) {
|
|
if (!times.length) return null;
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<h2 className="text-lg font-semibold">{title}</h2>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{times.map((time) => (
|
|
<Button className="mb-2" key={time.toString()} variant="outline">
|
|
{time.format('HH:mm')}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|