calendar-13

1"use client"
2 
3import * as React from "react"
4 
5import { Calendar } from "@/registry/default/ui/calendar"
6import { Label } from "@/registry/default/ui/label"
7import {
8  Select,
9  SelectContent,
10  SelectItem,
11  SelectTrigger,
12  SelectValue,
13} from "@/registry/default/ui/select"
14 
15export default function Calendar13() {
16  const [dropdown, setDropdown] =
17    React.useState<React.ComponentProps<typeof Calendar>["captionLayout"]>(
18      "dropdown"
19    )
20  const [date, setDate] = React.useState<Date | undefined>(
21    new Date(2025, 5, 12)
22  )
23 
24  return (
25    <div className="flex flex-col gap-4">
26      <Calendar
27        mode="single"
28        defaultMonth={date}
29        selected={date}
30        onSelect={setDate}
31        captionLayout={dropdown}
32        className="rounded-lg border shadow-sm"
33      />
34      <div className="flex flex-col gap-3">
35        <Label htmlFor="dropdown" className="px-1">
36          Dropdown
37        </Label>
38        <Select
39          value={dropdown}
40          onValueChange={(value) =>
41            setDropdown(
42              value as React.ComponentProps<typeof Calendar>["captionLayout"]
43            )
44          }
45        >
46          <SelectTrigger id="dropdown" className="bg-background w-full">
47            <SelectValue placeholder="Dropdown" />
48          </SelectTrigger>
49          <SelectContent align="center">
50            <SelectItem value="dropdown">Month and Year</SelectItem>
51            <SelectItem value="dropdown-months">Month Only</SelectItem>
52            <SelectItem value="dropdown-years">Year Only</SelectItem>
53          </SelectContent>
54        </Select>
55      </div>
56    </div>
57  )
58}