[V0_FILE]typescriptreact:file="date-picker.tsx" "use client" import * as React from "react" import { format } from "date-fns" import { CalendarIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" interface DatePickerProps { onChange: (date: Date | undefined) => void } const DatePicker: React.FC = ({ onChange }) => { const [date, setDate] = React.useState() const [open, setOpen] = React.useState(false) const handleSelect = (newDate: Date | undefined) => { setDate(newDate) onChange(newDate) setOpen(false) } return ( ) } export default DatePicker [V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 199 89% 48%; --primary-foreground: 0 0% 100%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 199 89% 48%; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 199 89% 48%; --primary-foreground: 0 0% 100%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 199 89% 48%; } .dark .rdp { --rdp-accent-color: #0ea5e9; --rdp-background-color: #1e293b; --rdp-accent-color-dark: #38bdf8; --rdp-background-color-dark: #334155; --rdp-outline: 2px solid #0ea5e9; --rdp-outline-selected: 3px solid #0ea5e9; --rdp-selected-color: #fff; } .dark .rdp-day_selected, .dark .rdp-day_selected:focus-visible, .dark .rdp-day_selected:hover { background-color: var(--rdp-accent-color); color: var(--rdp-selected-color); } .dark .rdp-day:hover { background-color: hsl(var(--muted)); } .dark .rdp-day_today { font-weight: bold; color: var(--rdp-accent-color); } .dark .rdp-button:hover:not([disabled]):not(.rdp-day_selected) { background-color: hsl(var(--muted)); } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { cn } from "@/lib/utils" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Scheduling Component", description: "A dark-themed scheduling component", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" import SchedulingComponent from "@/components/scheduling-component" export default function Page() { return (

) } [V0_FILE]typescriptreact:file="components/appointment-picker.tsx" isFixed="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect, useCallback } from "react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { X } from "lucide-react" interface AppointmentPickerProps { onChange: (times: { start: string | null; end: string | null }) => void minTime: string maxTime: string increment: number defaultDuration: number value?: { start: string | null; end: string | null } } const AppointmentPicker: React.FC = ({ onChange, minTime = "09:00 AM", maxTime = "05:00 PM", increment = 30, defaultDuration = 60, value, }) => { const [startTime, setStartTime] = useState(value?.start || null) const [endTime, setEndTime] = useState(value?.end || null) useEffect(() => { if (value) { setStartTime(value.start) setEndTime(value.end) } }, [value]) const [timeOptions, setTimeOptions] = useState([]) 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 formatTime = (hours: number, minutes: number) => { const period = hours >= 12 ? "PM" : "AM" const formattedHours = hours % 12 || 12 return `${formattedHours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")} ${period}` } const generateTimeOptions = useCallback(() => { const times: string[] = [] const start = parseTime(minTime) const end = parseTime(maxTime) for (let time = start; time <= end; time += increment / 60) { const hours = Math.floor(time) const minutes = Math.round((time % 1) * 60) times.push(formatTime(hours, minutes)) } return times }, [minTime, maxTime, increment]) useEffect(() => { const newTimeOptions = generateTimeOptions() if (JSON.stringify(newTimeOptions) !== JSON.stringify(timeOptions)) { setTimeOptions(newTimeOptions) } }, [generateTimeOptions, timeOptions]) const handleStartTimeChange = (time: string | null) => { setStartTime(time) if (time) { const endTimeValue = parseTime(time) + defaultDuration / 60 const endHours = Math.floor(endTimeValue) const endMinutes = Math.round((endTimeValue % 1) * 60) const newEndTime = formatTime(endHours, endMinutes) if (newEndTime !== endTime) { setEndTime(timeOptions.includes(newEndTime) ? newEndTime : null) } } else if (endTime !== null) { setEndTime(null) } } const handleEndTimeChange = (time: string | null) => { setEndTime(time) } const handleClear = () => { setStartTime(null) setEndTime(null) onChange({ start: null, end: null }) } useEffect(() => { if (startTime !== null || endTime !== null) { onChange({ start: startTime, end: endTime }) } }, [startTime, endTime, onChange]) return (

) } export default AppointmentPicker [V0_FILE]typescriptreact:file="components/date-picker.tsx" "use client" import * as React from "react" import { format } from "date-fns" import { CalendarIcon, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" interface DatePickerProps { onChange: (date: Date | undefined) => void value?: Date } const DatePicker: React.FC = ({ onChange, value }) => { const [date, setDate] = React.useState(value) const [open, setOpen] = React.useState(false) React.useEffect(() => { setDate(value) }, [value]) const handleSelect = (newDate: Date | undefined) => { setDate(newDate) onChange(newDate) setOpen(false) } return (

{date && ( handleSelect(undefined)} /> )}

) } export default DatePicker [V0_FILE]typescriptreact:file="components/scheduling-component.tsx" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import AppointmentPicker from "./appointment-picker" import DatePicker from "./date-picker" const SchedulingComponent: React.FC = () => { const [date, setDate] = useState(undefined) const [times, setTimes] = useState<{ start: string | null end: string | null }>({ start: null, end: null }) const [title, setTitle] = useState("Schedule Appointment") const handleClear = () => { setDate(undefined) setTimes({ start: null, end: null }) setTitle("Schedule Appointment") } const handleCreateSession = () => { console.log("Session created:", { date, times, title, }) } const isComplete = date && times.start && times.end return (

Schedule an Appointment

{isComplete && ( )}

) } export default SchedulingComponent

About

About