// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Table View 03 * @description A compact list-style table with avatars and inline actions. * Perfect for team member management or contact lists. * * @slots table-view, table-view-container, table-view-card, table-view-header, * table-view-title, table-view-description, table-view-list, table-view-item, * table-view-avatar, table-view-info, table-view-actions * @variant compact * * @registryDependencies button card avatar badge * @dependencies lucide-react */ import * as React from "react" import { Edit2, Trash2, Eye, Mail } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/registry/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/registry/ui/avatar" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface User { /** Unique identifier */ id: string /** User's full name */ name: string /** User's email address */ email: string /** Avatar image URL */ avatar?: string /** User's role */ role: string /** Last active timestamp */ lastActive: string } interface TableView03Props { /** Section title */ title?: string /** Section description */ description?: string /** List of users */ users?: User[] /** Callback when edit is clicked */ onEdit?: (id: string) => void /** Callback when delete is clicked */ onDelete?: (id: string) => void /** Callback when view is clicked */ onView?: (id: string) => void /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultUsers: User[] = [ { id: "1", name: "Sarah Johnson", email: "sarah@example.com", role: "Admin", lastActive: "2 hours ago" }, { id: "2", name: "Mike Chen", email: "mike@example.com", role: "Developer", lastActive: "5 mins ago" }, { id: "3", name: "Emily Davis", email: "emily@example.com", role: "Designer", lastActive: "1 day ago" }, { id: "4", name: "Chris Wilson", email: "chris@example.com", role: "Marketing", lastActive: "3 hours ago" }, ] // ============================================================================ // COMPONENT // ============================================================================ function TableView03({ title = "Team Members", description = "Manage your team and their roles", users = defaultUsers, onEdit, onDelete, onView, className, }: TableView03Props) { return (

{title} {description}

{users.map((user) => (

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

{user.name}

{user.role}

Active {user.lastActive}

))}

) } export default TableView03 export { TableView03, type TableView03Props, type User }