calendar-full-demo

1import { useState } from "react";
2import { AnimatedCalendar } from "@/registry/default/ui/calender";
3 
4export default function CalendarFullDemo() {
5  const [date, setDate] = useState<Date>();
6  const [dateRange, setDateRange] = useState<{ from?: Date; to?: Date }>();
7  const [dates, setDates] = useState<Date[]>([]);
8 
9  return (
10    <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
11      <div className="flex flex-col gap-3">
12        <h3 className="font-medium text-sm">Single Date</h3>
13        <AnimatedCalendar
14          mode="single"
15          value={date}
16          onChange={setDate}
17          showPresets
18          placeholder="Pick a date"
19        />
20        {date && (
21          <p className="text-muted-foreground text-xs">
22            {date.toLocaleDateString()}
23          </p>
24        )}
25      </div>
26 
27      <div className="flex flex-col gap-3">
28        <h3 className="font-medium text-sm">Date Range</h3>
29        <AnimatedCalendar
30          mode="range"
31          onChange={setDateRange}
32          placeholder="Select range"
33        />
34        {dateRange?.from && dateRange?.to && (
35          <p className="text-muted-foreground text-xs">
36            {dateRange.from.toLocaleDateString()} -{" "}
37            {dateRange.to.toLocaleDateString()}
38          </p>
39        )}
40      </div>
41 
42      <div className="flex flex-col gap-3">
43        <h3 className="font-medium text-sm">Multiple Dates</h3>
44        <AnimatedCalendar
45          mode="multiple"
46          value={dates}
47          onChange={setDates}
48          placeholder="Pick dates"
49        />
50        {dates.length > 0 && (
51          <p className="text-muted-foreground text-xs">
52            {dates.length} selected
53          </p>
54        )}
55      </div>
56    </div>
57  );
58}