1"use client";
2
3import { ChevronDownIcon } from "lucide-react";
4
5import { Button } from "@repo/ui/components/button";
6import { Calendar } from "@repo/ui/components/calendar";
7import { Input } from "@repo/ui/components/input";
8import { Label } from "@repo/ui/components/label";
9import {
10  Popover,
11  PopoverContent,
12  PopoverTrigger,
13} from "@repo/ui/components/popover";
14import { useState } from "react";

1<div className="flex gap-4">
2  <div className="flex flex-col gap-3">
3    <Label htmlFor="date-picker" className="px-1">
4      Date
5    </Label>
6    <Popover open={open} onOpenChange={setOpen}>
7      <PopoverTrigger asChild>
8        <Button
9          variant="outline"
10          id="date-picker"
11          className="w-32 justify-between font-normal"
12        >
13          {date ? date.toLocaleDateString() : "Select date"}
14          <ChevronDownIcon />
15        </Button>
16      </PopoverTrigger>
17      <PopoverContent className="w-auto overflow-hidden p-0" align="start">
18        <Calendar
19          mode="single"
20          selected={date}
21          captionLayout="dropdown"
22          onSelect={(date) => {
23            setDate(date);
24            setOpen(false);
25        }}
26        />
27      </PopoverContent>
28    </Popover>
29  </div>
30  <div className="flex flex-col gap-3">
31    <Label htmlFor="time-picker" className="px-1">
32      Time
33    </Label>
34    <Input
35      type="time"
36      id="time-picker"
37      step="1"
38      defaultValue="10:30:00"
39      className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
40    />
41  </div>
42</div>