calendar-presets-demo

1import { useState } from "react";
2import { AnimatedCalendar } from "@/registry/default/ui/calender";
3 
4export default function CalendarPresetsDemo() {
5  const [date, setDate] = useState<Date>();
6 
7  return (
8    <div className="flex flex-col gap-3">
9      <h3 className="font-medium text-sm">Calendar with Presets</h3>
10      <AnimatedCalendar
11        mode="range"
12        onChange={(val) => setDate(val as Date | undefined)}
13        showPresets
14        placeholder="Select a date"
15      />
16      {date && (
17        <p className="text-muted-foreground text-sm">
18          Selected: {date.toLocaleDateString()}
19        </p>
20      )}
21    </div>
22  );
23}