calendar-20

1"use client"
2 
3import * as React from "react"
4 
5import { Button } from "@/registry/default/ui/button"
6import { Calendar } from "@/registry/default/ui/calendar"
7import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
8 
9export default function Calendar20() {
10  const [date, setDate] = React.useState<Date | undefined>(
11    new Date(2025, 5, 12)
12  )
13  const [selectedTime, setSelectedTime] = React.useState<string | null>("10:00")
14  const timeSlots = Array.from({ length: 37 }, (_, i) => {
15    const totalMinutes = i * 15
16    const hour = Math.floor(totalMinutes / 60) + 9
17    const minute = totalMinutes % 60
18    return `${hour.toString().padStart(2, "0")}:${minute
19      .toString()
20      .padStart(2, "0")}`
21  })
22 
23  const bookedDates = Array.from(
24    { length: 3 },
25    (_, i) => new Date(2025, 5, 17 + i)
26  )
27 
28  return (
29    <Card className="gap-0 p-0">
30      <CardContent className="relative p-0 md:pr-48">
31        <div className="p-6">
32          <Calendar
33            mode="single"
34            selected={date}
35            onSelect={setDate}
36            defaultMonth={date}
37            disabled={bookedDates}
38            showOutsideDays={false}
39            modifiers={{
40              booked: bookedDates,
41            }}
42            modifiersClassNames={{
43              booked: "[&>button]:line-through opacity-100",
44            }}
45            className="bg-transparent p-0 [--cell-size:2.5rem] md:[--cell-size:3rem]"
46            formatters={{
47              formatWeekdayName: (date) => {
48                return date.toLocaleString("en-US", { weekday: "short" })
49              },
50            }}
51          />
52        </div>
53        <div className="no-scrollbar inset-y-0 right-0 flex max-h-72 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:w-48 md:border-l md:border-t-0">
54          <div className="grid gap-2">
55            {timeSlots.map((time) => (
56              <Button
57                key={time}
58                variant={selectedTime === time ? "default" : "outline"}
59                onClick={() => setSelectedTime(time)}
60                className="w-full shadow-none"
61              >
62                {time}
63              </Button>
64            ))}
65          </div>
66        </div>
67      </CardContent>
68      <CardFooter className="flex flex-col gap-4 border-t !py-5 px-6 md:flex-row">
69        <div className="text-sm">
70          {date && selectedTime ? (
71            <>
72              Your meeting is booked for{" "}
73// … truncated