// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Contact 02 * @description A contact section with form on one side and contact info cards * on the other. Great for providing multiple contact options. * * @slots contact, contact-container, contact-header, contact-heading, * contact-description, contact-content, contact-info, contact-info-item, * contact-info-icon, contact-form-card, contact-form, contact-form-row, * contact-field, contact-submit * @variant split * * @registryDependencies button input textarea label * @dependencies lucide-react */ import * as React from "react" import { Mail, Phone, MapPin, Send } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" import { Input } from "@/registry/ui/input" import { Textarea } from "@/registry/ui/textarea" import { Label } from "@/registry/ui/label" // ============================================================================ // TYPES // ============================================================================ interface ContactInfo { /** Unique identifier */ id: string /** Icon type */ type: "email" | "phone" | "address" /** Label text */ label: string /** Value/content */ value: string /** Optional link href */ href?: string } interface Contact02Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Contact information items */ contactInfo?: ContactInfo[] /** Submit button text */ submitText?: string /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultContactInfo: ContactInfo[] = [ { id: "contact-email", type: "email", label: "Email us", value: "hello@example.com", href: "#mailto:hello@example.com", }, { id: "contact-phone", type: "phone", label: "Call us", value: "+1 (555) 555-4567", href: "tel:+15551234567", }, { id: "contact-address", type: "address", label: "Visit us", value: "123 Main St, San Francisco, CA 94102", }, ] const iconMap = { email: Mail, phone: Phone, address: MapPin, } // ============================================================================ // COMPONENT // ============================================================================ function Contact02({ heading = "Contact us", description = "We'd love to hear from you. Choose your preferred method of contact or fill out the form.", contactInfo = defaultContactInfo, submitText = "Send message", className, }: Contact02Props) { return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Contact Info */}

Contact information

{contactInfo.map((info) => { const Icon = iconMap[info.type] const content = (

{info.label}

{info.value}

) return info.href ? ( {content} ) : (

{content}

) })}

{/* Form */}

Send us a message

Name

Subject

Message