calendar-26

1"use client"
2 
3import * as React from "react"
4import { ChevronDownIcon } from "lucide-react"
5 
6import { Button } from "@/registry/new-york/ui/button"
7import { Calendar } from "@/registry/new-york/ui/calendar"
8import { Input } from "@/registry/new-york/ui/input"
9import { Label } from "@/registry/new-york/ui/label"
10import {
11  Popover,
12  PopoverContent,
13  PopoverTrigger,
14} from "@/registry/new-york/ui/popover"
15 
16export default function Calendar26() {
17  const [openFrom, setOpenFrom] = React.useState(false)
18  const [openTo, setOpenTo] = React.useState(false)
19  const [dateFrom, setDateFrom] = React.useState<Date | undefined>(
20    new Date("2025-06-01")
21  )
22  const [dateTo, setDateTo] = React.useState<Date | undefined>(
23    new Date("2025-06-03")
24  )
25 
26  return (
27    <div className="flex w-full max-w-64 min-w-0 flex-col gap-6">
28      <div className="flex gap-4">
29        <div className="flex flex-1 flex-col gap-3">
30          <Label htmlFor="date-from" className="px-1">
31            Check-in
32          </Label>
33          <Popover open={openFrom} onOpenChange={setOpenFrom}>
34            <PopoverTrigger asChild>
35              <Button
36                variant="outline"
37                id="date-from"
38                className="w-full justify-between font-normal"
39              >
40                {dateFrom
41                  ? dateFrom.toLocaleDateString("en-US", {
42                      day: "2-digit",
43                      month: "short",
44                      year: "numeric",
45                    })
46                  : "Select date"}
47                <ChevronDownIcon />
48              </Button>
49            </PopoverTrigger>
50            <PopoverContent
51              className="w-auto overflow-hidden p-0"
52              align="start"
53            >
54              <Calendar
55                mode="single"
56                selected={dateFrom}
57                captionLayout="dropdown"
58                onSelect={(date) => {
59                  setDateFrom(date)
60                  setOpenFrom(false)
61                }}
62              />
63            </PopoverContent>
64          </Popover>
65        </div>
66        <div className="flex flex-col gap-3">
67          <Label htmlFor="time-from" className="invisible px-1">
68            From
69          </Label>
70          <Input
71            type="time"
72            id="time-from"
73            step="1"
74            defaultValue="10:30:00"
75// … truncated