calendar-24

1"use client"
2 
3import * as React from "react"
4import { ChevronDownIcon } from "lucide-react"
5 
6import { Button } from "@/registry/default/ui/button"
7import { Calendar } from "@/registry/default/ui/calendar"
8import { Input } from "@/registry/default/ui/input"
9import { Label } from "@/registry/default/ui/label"
10import {
11  Popover,
12  PopoverContent,
13  PopoverTrigger,
14} from "@/registry/default/ui/popover"
15 
16export default function Calendar24() {
17  const [open, setOpen] = React.useState(false)
18  const [date, setDate] = React.useState<Date | undefined>(undefined)
19 
20  return (
21    <div className="flex gap-4">
22      <div className="flex flex-col gap-3">
23        <Label htmlFor="date" className="px-1">
24          Date
25        </Label>
26        <Popover open={open} onOpenChange={setOpen}>
27          <PopoverTrigger asChild>
28            <Button
29              variant="outline"
30              id="date"
31              className="w-32 justify-between font-normal"
32            >
33              {date ? date.toLocaleDateString() : "Select date"}
34              <ChevronDownIcon />
35            </Button>
36          </PopoverTrigger>
37          <PopoverContent className="w-auto overflow-hidden p-0" align="start">
38            <Calendar
39              mode="single"
40              selected={date}
41              captionLayout="dropdown"
42              onSelect={(date) => {
43                setDate(date)
44                setOpen(false)
45              }}
46            />
47          </PopoverContent>
48        </Popover>
49      </div>
50      <div className="flex flex-col gap-3">
51        <Label htmlFor="time" className="px-1">
52          Time
53        </Label>
54        <Input
55          type="time"
56          id="time"
57          step="1"
58          defaultValue="10:30:00"
59          className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
60        />
61      </div>
62    </div>
63  )
64}