import * as React from "react"; import { Linkedin, Twitter, Mail, Briefcase } from "lucide-react"; import { TeamDirectoryOne } from "@/registry/team-directory-one/team-directory-one"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef; const members = [ { id: "1", name: "Sarah Chen", role: "VP of Engineering", department: "Engineering", location: "San Francisco, CA", timezone: "PST (UTC-8)", pronouns: "she/her", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah", fallback: "SC", seniority: "executive" as const, bio: "Leading our engineering org with focus on scalability and team growth. Passionate about mentorship and building inclusive tech teams.", socialLinks: [ { platform: "LinkedIn", url: "https://linkedin.com", icon: , }, { platform: "Twitter", url: "https://twitter.com", icon: , }, ], }, { id: "2", name: "Marcus Johnson", role: "Senior Product Designer", department: "Design", location: "New York, NY", timezone: "EST (UTC-5)", pronouns: "he/him", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Marcus", fallback: "MJ", seniority: "senior" as const, bio: "Crafting user experiences that delight. 8 years in product design with focus on design systems and accessibility.", socialLinks: [ { platform: "LinkedIn", url: "https://linkedin.com", icon: , }, ], }, { id: "3", name: "Priya Sharma", role: "Staff Engineer", department: "Engineering", location: "Bangalore, India", timezone: "IST (UTC+5:30)", pronouns: "she/her", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Priya", fallback: "PS", seniority: "staff" as const, bio: "Backend systems architect specializing in distributed systems and microservices. Open source contributor.", }, { id: "4", name: "Alex Rivera", role: "Product Manager", department: "Product", location: "Austin, TX", timezone: "CST (UTC-6)", pronouns: "they/them", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Alex", fallback: "AR", seniority: "mid" as const, bio: "Driving product strategy with data-informed decisions. Previously at enterprise SaaS companies.", socialLinks: [ { platform: "LinkedIn", url: "https://linkedin.com", icon: , }, { platform: "Email", url: "mailto:alex@example.com", icon: , }, ], }, { id: "5", name: "Emma Wilson", role: "Head of Design", department: "Design", location: "London, UK", timezone: "GMT (UTC+0)", pronouns: "she/her", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Emma", fallback: "EW", seniority: "executive" as const, bio: "Building design teams and systems that scale. 12+ years leading design organizations.", socialLinks: [ { platform: "LinkedIn", url: "https://linkedin.com", icon: , }, { platform: "Twitter", url: "https://twitter.com", icon: , }, ], }, { id: "6", name: "David Kim", role: "Senior Backend Engineer", department: "Engineering", location: "Seoul, South Korea", timezone: "KST (UTC+9)", pronouns: "he/him", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=David", fallback: "DK", seniority: "senior" as const, bio: "Building robust APIs and scalable infrastructure. Love solving complex technical challenges.", }, { id: "7", name: "Sofia Martinez", role: "UX Researcher", department: "Design", location: "Barcelona, Spain", timezone: "CET (UTC+1)", pronouns: "she/her", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Sofia", fallback: "SM", seniority: "mid" as const, bio: "Turning user insights into actionable design decisions. Conducted 500+ user interviews.", socialLinks: [ { platform: "LinkedIn", url: "https://linkedin.com", icon: , }, ], }, { id: "8", name: "James Brown", role: "Chief Product Officer", department: "Product", location: "San Francisco, CA", timezone: "PST (UTC-8)", pronouns: "he/him", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=James", fallback: "JB", seniority: "executive" as const, bio: "Defining product vision and strategy. Led multiple 0-to-1 product launches.", socialLinks: [ { platform: "LinkedIn", url: "https://linkedin.com", icon: , }, { platform: "Twitter", url: "https://twitter.com", icon: , }, ], }, { id: "9", name: "Yuki Tanaka", role: "Principal Engineer", department: "Engineering", location: "Tokyo, Japan", timezone: "JST (UTC+9)", pronouns: "they/them", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Yuki", fallback: "YT", seniority: "principal" as const, bio: "Technical leader with expertise in system architecture and performance optimization.", }, { id: "10", name: "Olivia Taylor", role: "Product Designer", department: "Design", location: "Toronto, Canada", timezone: "EST (UTC-5)", pronouns: "she/her", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Olivia", fallback: "OT", seniority: "mid" as const, bio: "Creating beautiful and functional interfaces. Focused on mobile-first design.", }, { id: "11", name: "Carlos Rodriguez", role: "Engineering Manager", department: "Engineering", location: "Mexico City, Mexico", timezone: "CST (UTC-6)", pronouns: "he/him", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Carlos", fallback: "CR", seniority: "senior" as const, bio: "Leading high-performing engineering teams. Focus on agile practices and team development.", }, { id: "12", name: "Aisha Patel", role: "Senior Product Manager", department: "Product", location: "Dubai, UAE", timezone: "GST (UTC+4)", pronouns: "she/her", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Aisha", fallback: "AP", seniority: "senior" as const, bio: "Product leader with expertise in B2B SaaS and enterprise solutions.", socialLinks: [ { platform: "LinkedIn", url: "https://linkedin.com", icon: , }, ], }, ]; const departments = [ { value: "Engineering", label: "Engineering" }, { value: "Design", label: "Design" }, { value: "Product", label: "Product" }, ]; const locations = [ { value: "San Francisco, CA", label: "San Francisco, CA" }, { value: "New York, NY", label: "New York, NY" }, { value: "London, UK", label: "London, UK" }, { value: "Tokyo, Japan", label: "Tokyo, Japan" }, { value: "Bangalore, India", label: "Bangalore, India" }, ]; const seniorities = [ { value: "junior", label: "Junior" }, { value: "mid", label: "Mid-Level" }, { value: "senior", label: "Senior" }, { value: "staff", label: "Staff" }, { value: "principal", label: "Principal" }, { value: "executive", label: "Executive" }, ]; export function TeamDirectoryOneDemo() { return (

, }} className="mx-auto max-w-7xl px-4 py-12" />

Implementation notes

Filter selections update client-side with live role count announcements for screen readers. The filter sidebar stays sticky on desktop while on mobile, filters collapse into a bottom sheet. Search provides instant results with skeleton loading states during data fetches.

); } export default TeamDirectoryOneDemo;

Simple