calendar-32

1"use client"
2 
3import * as React from "react"
4import { CalendarPlusIcon } from "lucide-react"
5 
6import { Button } from "@/registry/default/ui/button"
7import { Calendar } from "@/registry/default/ui/calendar"
8import {
9  Drawer,
10  DrawerContent,
11  DrawerDescription,
12  DrawerHeader,
13  DrawerTitle,
14  DrawerTrigger,
15} from "@/registry/default/ui/drawer"
16import { Label } from "@/registry/default/ui/label"
17 
18export default function Calendar32() {
19  const [open, setOpen] = React.useState(false)
20  const [date, setDate] = React.useState<Date | undefined>(undefined)
21 
22  return (
23    <div className="flex flex-col gap-3">
24      <Label htmlFor="date" className="px-1">
25        Date of birth
26      </Label>
27      <Drawer open={open} onOpenChange={setOpen}>
28        <DrawerTrigger asChild>
29          <Button
30            variant="outline"
31            id="date"
32            className="w-48 justify-between font-normal"
33          >
34            {date ? date.toLocaleDateString() : "Select date"}
35            <CalendarPlusIcon />
36          </Button>
37        </DrawerTrigger>
38        <DrawerContent className="w-auto overflow-hidden p-0">
39          <DrawerHeader className="sr-only">
40            <DrawerTitle>Select date</DrawerTitle>
41            <DrawerDescription>Set your date of birth</DrawerDescription>
42          </DrawerHeader>
43          <Calendar
44            mode="single"
45            selected={date}
46            captionLayout="dropdown"
47            onSelect={(date) => {
48              setDate(date)
49              setOpen(false)
50            }}
51            className="mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]"
52          />
53        </DrawerContent>
54      </Drawer>
55      <div className="text-muted-foreground px-1 text-sm">
56        This example works best on mobile.
57      </div>
58    </div>
59  )
60}