Calendar32() — ui Function Reference

Architecture documentation for the Calendar32() function in calendar-32.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ Calendar32() — ui Function Reference

Dependency Diagram

graph TD
  f36d867d_7ab7_c1d3_baf6_58679c6b24c9["Calendar32()"]
  2b6d03bb_5f39_be5d_7f16_da5c3800b4e0["calendar-32.tsx"]
  f36d867d_7ab7_c1d3_baf6_58679c6b24c9 -->|defined in| 2b6d03bb_5f39_be5d_7f16_da5c3800b4e0
  style f36d867d_7ab7_c1d3_baf6_58679c6b24c9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/__registry__/default/blocks/calendar-32.tsx lines 18–60

export default function Calendar32() {
  const [open, setOpen] = React.useState(false)
  const [date, setDate] = React.useState<Date | undefined>(undefined)

  return (
    <div className="flex flex-col gap-3">
      <Label htmlFor="date" className="px-1">
        Date of birth
      </Label>
      <Drawer open={open} onOpenChange={setOpen}>
        <DrawerTrigger asChild>
          <Button
            variant="outline"
            id="date"
            className="w-48 justify-between font-normal"
          >
            {date ? date.toLocaleDateString() : "Select date"}
            <CalendarPlusIcon />
          </Button>
        </DrawerTrigger>
        <DrawerContent className="w-auto overflow-hidden p-0">
          <DrawerHeader className="sr-only">
            <DrawerTitle>Select date</DrawerTitle>
            <DrawerDescription>Set your date of birth</DrawerDescription>
          </DrawerHeader>
          <Calendar
            mode="single"
            selected={date}
            captionLayout="dropdown"
            onSelect={(date) => {
              setDate(date)
              setOpen(false)
            }}
            className="mx-auto [--cell-size:clamp(0px,calc(100vw/7.5),52px)]"
          />
        </DrawerContent>
      </Drawer>
      <div className="text-muted-foreground px-1 text-sm">
        This example works best on mobile.
      </div>
    </div>
  )
}