// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name List View 02 * @description A list view with avatars and detailed information. * Great for user lists, contacts, and team members. * * @slots list-view, list-view-container, list-view-header, list-view-title, * list-view-count, list-view-list, list-view-item, list-view-avatar, * list-view-status-indicator, list-view-item-content, list-view-item-name, * list-view-item-role, list-view-item-location, list-view-item-actions * @variant avatar * * @registryDependencies button badge avatar * @dependencies lucide-react */ import * as React from "react" import { Button } from "@/registry/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar" import { MoreHorizontal, Mail, MapPin } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface Person { /** Unique identifier */ id: string /** Person's name */ name: string /** Email address */ email: string /** Role or job title */ role?: string /** Location */ location?: string /** Avatar URL */ avatarUrl?: string /** Online status */ status?: "online" | "away" | "offline" } interface ListView02Props { /** List title */ title?: string /** People to display */ people?: Person[] /** Callback when person is clicked */ onPersonClick?: (id: string) => void /** Callback when email is clicked */ onEmailClick?: (email: string) => void /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultPeople: Person[] = [ { id: "1", name: "Sarah Johnson", email: "sarah@example.com", role: "Engineering Lead", location: "San Francisco", status: "online" }, { id: "2", name: "Michael Chen", email: "michael@example.com", role: "Product Designer", location: "New York", status: "online" }, { id: "3", name: "Emily Davis", email: "emily@example.com", role: "Frontend Developer", location: "Austin", status: "away" }, { id: "4", name: "James Wilson", email: "james@example.com", role: "Backend Developer", location: "Seattle", status: "offline" }, { id: "5", name: "Lisa Anderson", email: "lisa@example.com", role: "DevOps Engineer", location: "Denver", status: "online" }, ] const statusColors: Record = { online: "bg-primary", away: "bg-warning", offline: "bg-muted-foreground", } // ============================================================================ // COMPONENT // ============================================================================ function ListView02({ title = "Team Members", people = defaultPeople, onPersonClick, onEmailClick, className, }: ListView02Props) { return (

{/* Header */}

{title}

{people.length} members

{/* List */}

{people.map((person) => (

{/* Avatar with Status */}

{person.name.split(" ").map((n) => n[0]).join("")} {person.status && (

)}

{/* Info */}

{person.role && (

{person.role}

)}

{person.location && ( )}

{/* Actions */}

))}

) } export default ListView02 export { ListView02, type ListView02Props, type Person }

{title}

{person.name}