"use client" /** * @name Contact 07 * @description Contact section with appointment scheduling calendar. * Perfect for consultations and service-based businesses. * * @slots contact, contact-container, contact-grid, contact-form-section, * contact-header, contact-badge, contact-heading, contact-description, * contact-form, contact-field, contact-input, contact-submit, * contact-calendar-section, contact-calendar-header, * contact-calendar-title, contact-calendar, contact-calendar-days, * contact-calendar-day, contact-times, contact-time-slot * @variant scheduling * * @registryDependencies badge button input label * @dependencies lucide-react */ import * as React from "react" import { Calendar, Clock } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" import { Input } from "@/registry/ui/input" import { Label } from "@/registry/ui/label" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface TimeSlot { id: string /** Time string */ time: string /** Is available */ available: boolean } interface Contact07Props { /** Section badge */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Available time slots */ timeSlots?: TimeSlot[] /** Submit button text */ submitText?: string /** Additional CSS classes */ className?: string /** Base ID for multi-instance safety */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultTimeSlots: TimeSlot[] = [ { id: "slot-1", time: "9:00 AM", available: true }, { id: "slot-2", time: "10:00 AM", available: false }, { id: "slot-3", time: "11:00 AM", available: true }, { id: "slot-4", time: "1:00 PM", available: true }, { id: "slot-5", time: "2:00 PM", available: true }, { id: "slot-6", time: "3:00 PM", available: false }, { id: "slot-7", time: "4:00 PM", available: true }, ] // ============================================================================ // COMPONENT // ============================================================================ function Contact07({ badge = "Book a Call", heading = "Schedule a consultation", description = "Pick a time that works for you and we'll send you a calendar invite.", timeSlots = defaultTimeSlots, submitText = "Book Appointment", className, idBase = "contact-07", }: Contact07Props) { const [selectedDate, setSelectedDate] = React.useState(null) const [selectedTime, setSelectedTime] = React.useState(null) const headingId = `${idBase}-heading` // Generate sample dates const dates = React.useMemo(() => { const today = new Date() return Array.from({ length: 7 }, (_, i) => { const date = new Date(today) date.setDate(today.getDate() + i + 1) return { day: date.toLocaleDateString('en-US', { weekday: 'short' }), date: date.getDate(), } }) }, []) return (

{/* Form Section */}

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Form */}

{/* Calendar Section */}

{/* Calendar Header */}

{/* Date Selection */}

{dates.map((d, index) => ( ))}

{/* Time Slots */}

{timeSlots.map((slot) => ( ))}

) } export default Contact07 export { Contact07, type Contact07Props }

{heading}

Select a Date

Available Times