// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Contact 06 * @description Contact section with team member cards. * Great for showing specific contacts for different departments. * * @slots contact, contact-container, contact-header, contact-badge, * contact-heading, contact-description, contact-grid, contact-card, * contact-card-avatar, contact-card-content, contact-card-name, * contact-card-role, contact-card-department, contact-card-email, * contact-card-phone, contact-card-actions, contact-card-cta * @variant team-cards * * @registryDependencies badge button-link * @dependencies lucide-react */ import * as React from "react" import { Mail, Phone, User } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { ButtonLink } from "@/registry/ui/button-link" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface TeamMember { id: string /** Member name */ name: string /** Member role */ role: string /** Department */ department: string /** Email address */ email: string /** Phone number */ phone?: string } interface Contact06Props { /** Section badge */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Team members */ members?: TeamMember[] /** Additional CSS classes */ className?: string /** Base ID for multi-instance safety */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultMembers: TeamMember[] = [ { id: "member-1", name: "Sarah Mitchell", role: "Sales Director", department: "Sales", email: "sarah@company.com", phone: "+1 (555) 555-4567", }, { id: "member-2", name: "David Chen", role: "Customer Success Manager", department: "Support", email: "david@company.com", phone: "+1 (555) 555-5678", }, { id: "member-3", name: "Emily Rodriguez", role: "Partnership Lead", department: "Business Development", email: "emily@company.com", phone: "+1 (555) 555-6789", }, { id: "member-4", name: "Michael Park", role: "Technical Account Manager", department: "Engineering", email: "michael@company.com", phone: "+1 (555) 555-7890", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Contact06({ badge = "Our Team", heading = "Get in touch with the right person", description = "Reach out directly to our team members. We're here to help you with any questions.", members = defaultMembers, className, idBase = "contact-06", }: Contact06Props) { const headingId = `${idBase}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Team Grid */}

{members.map((member) => (

{/* Avatar */}

{/* Content */}

{member.name}

{member.role}

{member.department}

{/* Contact Info */}

{member.phone && ( )}

{/* Actions */}

Send Message

))}

) } export default Contact06 export { Contact06, type Contact06Props }