time-picker

1"use client"
2 
3import { Button } from "@/components/ui/button"
4import {
5  Popover,
6  PopoverContent,
7  PopoverTrigger,
8} from "@/components/ui/popover"
9import { ScrollArea } from "@/components/ui/scroll-area"
10import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
11import { cn } from "@/lib/utils"
12import { useTimePicker } from "@zenithui/time-picker"
13import { useEffect, useRef } from "react"
14import { Clock } from "lucide-react"
15 
16function formatTimeto24(time: string) {
17  const [hours, minutes] = time.split(":").map(Number)
18  const period = hours >= 12 ? "PM" : "AM"
19  // Convert 0 -> 12 for AM and 12 -> 12 for PM
20  const formattedHours = hours % 12 || 12
21  // Ensure two-digit minutes
22  const formattedMinutes = String(minutes).padStart(2, "0")
23  return `${formattedHours}:${formattedMinutes} ${period}`
24}
25 
26interface TimePickerProps {
27  time: string // HH:MM
28  onTimeChange: (time: string) => void // HH:MM
29  className?: string
30  format?: "12-hours" | "24-hours"
31  align?: "center" | "end" | "start"
32  side?: "top" | "right" | "bottom" | "left"
33  alignOffset?: number
34  sideOffset?: number
35  formatter?: (time: string) => string
36}
37 
38export default function TimePicker({
39  time,
40  onTimeChange,
41  className,
42  format = "12-hours",
43  align = "center",
44  side = "bottom",
45  alignOffset = 0,
46  sideOffset = 0,
47  formatter = formatTimeto24,
48}: TimePickerProps) {
49  const {
50    hours,
51    minutes,
52    periods,
53    hour,
54    minute,
55    period,
56    setHour,
57    setMinute,
58    setPeriod,
59  } = useTimePicker({
60    format: format,
61    initialTime: time,
62    onTimeChange: onTimeChange,
63  })
64 
65  return (
66    <Popover>
67      <PopoverTrigger asChild>
68        <Button
69          variant="outline"
70          className={cn(
71            "flex w-full max-w-32 items-center justify-between",
72            className,
73          )}
74        >
75          <span className="text-sky-950">{`${formatter(time)}`}</span>
76          <Clock className="size-5 cursor-pointer self-center text-slate-500" />
77        </Button>
78      </PopoverTrigger>
79      <PopoverContent
80        align={align}
81        side={side}
82        alignOffset={alignOffset}
83        sideOffset={sideOffset}
84        className={cn(
85          "grid h-fit gap-1 overflow-hidden rounded-sm px-0 py-4",
86          format === "12-hours" ? "w-60 grid-cols-3" : "w-40 grid-cols-2",
87        )}
88        onWheel={(e) => {
89          e.stopPropagation()
90        }}
91      >
92        <TimeScrollList
93          options={hours}
94          value={hour}
95// … truncated