calendar-31

1"use client"
2 
3import * as React from "react"
4import { formatDateRange } from "little-date"
5import { PlusIcon } from "lucide-react"
6 
7import { Button } from "@/registry/default/ui/button"
8import { Calendar } from "@/registry/default/ui/calendar"
9import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
10 
11const events = [
12  {
13    title: "Team Sync Meeting",
14    from: "2025-06-12T09:00:00",
15    to: "2025-06-12T10:00:00",
16  },
17  {
18    title: "Design Review",
19    from: "2025-06-12T11:30:00",
20    to: "2025-06-12T12:30:00",
21  },
22  {
23    title: "Client Presentation",
24    from: "2025-06-12T14:00:00",
25    to: "2025-06-12T15:00:00",
26  },
27]
28 
29export default function Calendar31() {
30  const [date, setDate] = React.useState<Date | undefined>(
31    new Date(2025, 5, 12)
32  )
33 
34  return (
35    <Card className="w-fit py-4">
36      <CardContent className="px-4">
37        <Calendar
38          mode="single"
39          selected={date}
40          onSelect={setDate}
41          className="bg-transparent p-0"
42          required
43        />
44      </CardContent>
45      <CardFooter className="flex flex-col items-start gap-3 border-t px-4 pb-0 pt-4">
46        <div className="flex w-full items-center justify-between px-1">
47          <div className="text-sm font-medium">
48            {date?.toLocaleDateString("en-US", {
49              day: "numeric",
50              month: "long",
51              year: "numeric",
52            })}
53          </div>
54          <Button
55            variant="ghost"
56            size="icon"
57            className="h-6 w-6"
58            title="Add Event"
59          >
60            <PlusIcon />
61            <span className="sr-only">Add Event</span>
62          </Button>
63        </div>
64        <div className="flex w-full flex-col gap-2">
65          {events.map((event) => (
66            <div
67              key={event.title}
68              className="bg-muted after:bg-primary/70 relative rounded-md p-2 pl-6 text-sm after:absolute after:inset-y-2 after:left-2 after:w-1 after:rounded-full"
69            >
70              <div className="font-medium">{event.title}</div>
71              <div className="text-muted-foreground text-xs">
72                {formatDateRange(new Date(event.from), new Date(event.to))}
73              </div>
74            </div>
75          ))}
76        </div>
77      </CardFooter>
78    </Card>
79  )
80}