[V0_FILE]typescriptreact:file="components/AppointmentPicker.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useCallback, useRef, useEffect } from "react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Clock, X } from "lucide-react" type IncrementOption = 15 | 30 | 60 | 90 | 120 type DurationOption = 30 | 60 | 90 | 120 interface AppointmentPickerProps { onChange?: (times: { start: string | null; end: string | null }) => void minTime?: string maxTime?: string increment?: IncrementOption defaultDuration?: DurationOption } const AppointmentPicker = ({ onChange, minTime = "09:00 AM", maxTime = "05:00 PM", increment = 30, defaultDuration = 60, }: AppointmentPickerProps) => { const [startTime, setStartTime] = useState(null) const [endTime, setEndTime] = useState(null) const [timeOptions, setTimeOptions] = useState([]) const [isFirstOpen, setIsFirstOpen] = useState(true) const defaultFocusRef = useRef(null) const parseTime = (timeStr: string) => { const [time, period] = timeStr.split(" ") const [hours, minutes] = time.split(":").map(Number) const isPM = period === "PM" return hours + (isPM && hours !== 12 ? 12 : 0) + minutes / 60 } const calculateDuration = (start: string, end: string) => { const startValue = parseTime(start) const endValue = parseTime(end) const durationHours = endValue - startValue const hours = Math.floor(durationHours) const minutes = Math.round((durationHours - hours) * 60) if (hours === 0) { return `${minutes} minutes` } else if (minutes === 0) { return `${hours} hour${hours > 1 ? "s" : ""}` } else { return `${hours} hour${hours > 1 ? "s" : ""} ${minutes} minutes` } } const isTimeInRange = useCallback( (time: string) => { const timeValue = parseTime(time) const minValue = parseTime(minTime) const maxValue = parseTime(maxTime) return timeValue >= minValue && timeValue <= maxValue }, [minTime, maxTime], ) const filterEndTimes = useCallback( (time: string) => { if (!startTime) return isTimeInRange(time) return parseTime(time) > parseTime(startTime) && isTimeInRange(time) }, [startTime, isTimeInRange], ) const findClosestTime = useCallback(() => { const now = new Date() const currentHours = now.getHours() const currentMinutes = now.getMinutes() const currentTimeValue = currentHours + currentMinutes / 60 // If current time is past 5 PM or before 9 AM, return first time slot if (currentTimeValue >= 17 || currentTimeValue < 9) { return timeOptions[0] // 9:00 AM } let closestTime = timeOptions[0] let smallestDiff = 24 timeOptions.forEach((timeStr) => { const [time, period] = timeStr.split(" ") const [hours, minutes] = time.split(":").map(Number) const isPM = period === "PM" const timeValue = hours + (isPM && hours !== 12 ? 12 : 0) + minutes / 60 const diff = Math.abs(timeValue - currentTimeValue) if (diff < smallestDiff) { smallestDiff = diff closestTime = timeStr } }) return closestTime }, [timeOptions]) const getTimeWithDuration = (timeStr: string) => { const [time, period] = timeStr.split(" ") const [hours, minutes] = time.split(":").map(Number) let newHours = hours + Math.floor(defaultDuration / 60) let newMinutes = minutes + (defaultDuration % 60) if (newMinutes >= 60) { newHours += 1 newMinutes -= 60 } let newPeriod = period if (period === "AM" && newHours === 12) { newPeriod = "PM" } else if (period === "PM" && newHours === 12) { newPeriod = "AM" } else if (newHours > 12) { newHours -= 12 if (period === "AM") newPeriod = "PM" } return `${newHours.toString().padStart(2, "0")}:${newMinutes.toString().padStart(2, "0")} ${newPeriod}` } useEffect(() => { const generateTimeOptions = () => { const times: string[] = [] const startMinutes = 9 * 60 // 9 AM const endMinutes = 17 * 60 // 5 PM // Include exact end time for (let minutes = startMinutes; minutes < endMinutes; minutes += increment) { const hour = Math.floor(minutes / 60) const minute = minutes % 60 const period = hour >= 12 ? "PM" : "AM" const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour === 12 ? 12 : hour const timeString = `${displayHour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")} ${period}` times.push(timeString) } return times } setTimeOptions(generateTimeOptions()) }, [increment]) useEffect(() => { if (timeOptions.length > 0) { defaultFocusRef.current = findClosestTime() } }, [timeOptions, findClosestTime]) useEffect(() => { onChange?.({ start: startTime, end: endTime }) }, [startTime, endTime, onChange]) const handleStartTimeChange = (time: string | null) => { setStartTime(time) if (!time) { setEndTime(null) } else { const endTime = getTimeWithDuration(time) setEndTime(endTime) } } const handleEndTimeChange = (time: string | null) => { setEndTime(time) } const handleClear = () => { setStartTime(null) setEndTime(null) } const TimeSelect = ({ value, onChange, placeholder, disabled = false, filterTime, isStartTime, }: { value: string | null onChange: (time: string | null) => void placeholder: string disabled?: boolean filterTime?: (time: string) => boolean isStartTime?: boolean }) => { const filteredOptions = filterTime && !isStartTime ? timeOptions.filter(filterTime) : timeOptions return ( ) } return (

{(startTime || endTime) && ( )}

{startTime && endTime && (

Duration: {calculateDuration(startTime, endTime)}

)}

) } export default AppointmentPicker [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" import AppointmentPicker from "@/components/AppointmentPicker" export default function Home() { return (

Time Slot Selector

console.log("Selected times:", times)} minTime="08:00 AM" maxTime="06:00 PM" increment={30} defaultDuration={60} />

) }

About

About