"use client"; import { format } from "date-fns"; import { useState } from "react"; import { Calendar } from "@/registry/default/ui/calendar"; import { ScrollArea } from "@/registry/default/ui/scroll-area"; import { Toggle } from "@/registry/default/ui/toggle"; import { ToggleGroup } from "@/registry/default/ui/toggle-group"; export default function Particle() { const today = new Date(); const [date, setDate] = useState(today); const [time, setTime] = useState(null); const timeSlots = [ { available: false, time: "09:00" }, { available: false, time: "09:30" }, { available: true, time: "10:00" }, { available: true, time: "10:30" }, { available: true, time: "11:00" }, { available: true, time: "11:30" }, { available: false, time: "12:00" }, { available: true, time: "12:30" }, { available: true, time: "13:00" }, { available: true, time: "13:30" }, { available: true, time: "14:00" }, { available: false, time: "14:30" }, { available: false, time: "15:00" }, { available: true, time: "15:30" }, { available: true, time: "16:00" }, { available: true, time: "16:30" }, { available: true, time: "17:00" }, { available: true, time: "17:30" }, ]; return (

{ if (newDate) { setDate(newDate); setTime(null); } }} selected={date} />

{format(date, "EEEE, d")}

setTime(values[0] || null)} value={time ? [time] : []} > {timeSlots.map(({ time: timeSlot, available }) => ( {timeSlot} ))}

); }

Calendar 19

Instalação

Dependências

Registry dependencies