cal.pub0.org/packages/features/bookings/Booker/components/LargeViewHeader.tsx

44 lines
1.4 KiB
TypeScript

import { ChevronLeft, ChevronRight } from "lucide-react";
import dayjs from "@calcom/dayjs";
import { Button, ButtonGroup } from "@calcom/ui";
import { useBookerStore } from "../store";
export function LargeViewHeader({ extraDays }: { extraDays: number }) {
const layout = useBookerStore((state) => state.layout);
const selectedDateString = useBookerStore((state) => state.selectedDate);
const addToSelectedDate = useBookerStore((state) => state.addToSelectedDate);
const isLargeTimeslots = layout === "large_timeslots";
const selectedDate = dayjs(selectedDateString);
if (!isLargeTimeslots) return null;
return (
<div className="mt-8 mb-4 flex py-2.5">
<h3 className="text-base font-semibold leading-4">
{selectedDate.format("MMM D")}-{selectedDate.add(extraDays, "days").format("D")},{" "}
<span className="text-subtle">{selectedDate.format("YYYY")}</span>
</h3>
<div className="ml-auto">
<ButtonGroup>
<Button
variant="icon"
color="minimal"
StartIcon={ChevronLeft}
aria-label="Previous Day"
onClick={() => addToSelectedDate(-extraDays - 1)}
/>
<Button
variant="icon"
color="minimal"
StartIcon={ChevronRight}
aria-label="Next Day"
onClick={() => addToSelectedDate(extraDays + 1)}
/>
</ButtonGroup>
</div>
</div>
);
}