Calendar22() — ui Function Reference

Architecture documentation for the Calendar22() function in calendar-22.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ Calendar22() — ui Function Reference

Dependency Diagram

graph TD
  53b7260c_58b9_1c64_09a1_d8736001a7a2["Calendar22()"]
  32653f09_3afa_09ba_8e0a_62ccad7c4bd7["calendar-22.tsx"]
  53b7260c_58b9_1c64_09a1_d8736001a7a2 -->|defined in| 32653f09_3afa_09ba_8e0a_62ccad7c4bd7
  style 53b7260c_58b9_1c64_09a1_d8736001a7a2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/__registry__/new-york/blocks/calendar-22.tsx lines 15–49

export default function Calendar22() {
  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>
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button
            variant="outline"
            id="date"
            className="w-48 justify-between font-normal"
          >
            {date ? date.toLocaleDateString() : "Select date"}
            <ChevronDownIcon />
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
          <Calendar
            mode="single"
            selected={date}
            captionLayout="dropdown"
            onSelect={(date) => {
              setDate(date)
              setOpen(false)
            }}
          />
        </PopoverContent>
      </Popover>
    </div>
  )
}