calendar-16

1"use client"
2 
3import * as React from "react"
4import { Clock2Icon } from "lucide-react"
5 
6import { Calendar } from "@/registry/default/ui/calendar"
7import { Card, CardContent, CardFooter } from "@/registry/default/ui/card"
8import { Input } from "@/registry/default/ui/input"
9import { Label } from "@/registry/default/ui/label"
10 
11export default function Calendar16() {
12  const [date, setDate] = React.useState<Date | undefined>(
13    new Date(2025, 5, 12)
14  )
15 
16  return (
17    <Card className="w-fit py-4">
18      <CardContent className="px-4">
19        <Calendar
20          mode="single"
21          selected={date}
22          onSelect={setDate}
23          className="bg-transparent p-0"
24        />
25      </CardContent>
26      <CardFooter className="flex flex-col gap-6 border-t px-4 pb-0 pt-4">
27        <div className="flex w-full flex-col gap-3">
28          <Label htmlFor="time-from">Start Time</Label>
29          <div className="relative flex w-full items-center gap-2">
30            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
31            <Input
32              id="time-from"
33              type="time"
34              step="1"
35              defaultValue="10:30:00"
36              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
37            />
38          </div>
39        </div>
40        <div className="flex w-full flex-col gap-3">
41          <Label htmlFor="time-to">End Time</Label>
42          <div className="relative flex w-full items-center gap-2">
43            <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
44            <Input
45              id="time-to"
46              type="time"
47              step="1"
48              defaultValue="12:30:00"
49              className="appearance-none pl-8 [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
50            />
51          </div>
52        </div>
53      </CardFooter>
54    </Card>
55  )
56}