// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Contact 03 * @description A contact form with category/subject selection. Shows relevant * contact info based on inquiry type. Ideal for routing to different teams. * * @slots contact, contact-container, contact-header, contact-heading, * contact-description, contact-content, contact-categories, * contact-category-button, contact-category-info, contact-form, * contact-form-row, contact-field, contact-submit * @variant categorized * * @registryDependencies button input label textarea * @dependencies lucide-react */ import * as React from "react" import { Mail, Phone, MessageSquare, Headphones } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" import { Input } from "@/registry/ui/input" import { Label } from "@/registry/ui/label" import { Textarea } from "@/registry/ui/textarea" // ============================================================================ // TYPES // ============================================================================ interface ContactCategory { /** Category value */ value: string /** Category label */ label: string /** Contact email for this category */ email: string /** Description */ description: string } interface Contact03Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Contact categories */ categories?: ContactCategory[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultCategories: ContactCategory[] = [ { value: "sales", label: "Sales", email: "sales@example.com", description: "Talk to our sales team about pricing and plans.", }, { value: "support", label: "Technical Support", email: "support@example.com", description: "Get help with technical issues or questions.", }, { value: "partnership", label: "Partnership", email: "partners@example.com", description: "Explore partnership and integration opportunities.", }, { value: "general", label: "General Inquiry", email: "hello@example.com", description: "Any other questions or feedback.", }, ] const categoryIcons: Record> = { sales: Phone, support: Headphones, partnership: MessageSquare, general: Mail, } // ============================================================================ // COMPONENT // ============================================================================ function Contact03({ heading = "Get in touch", description = "Have a question or need assistance? Select a category and we'll route your message to the right team.", categories = defaultCategories, className, }: Contact03Props) { const [selectedCategory, setSelectedCategory] = React.useState( categories[0]?.value || "" ) const activeCategory = categories.find((c) => c.value === selectedCategory) return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Category Selection */}

{categories.map((category) => { const Icon = categoryIcons[category.value] || Mail const isActive = selectedCategory === category.value return ( ) })}

{/* Category Description */} {activeCategory && (

{activeCategory.description}

Email: {activeCategory.email}

)} {/* Form */}