"use client" /** * @name List View 05 * @description A timeline-style activity feed with user actions and timestamps. * Perfect for audit logs, activity feeds, or notification history. * * @slots list-view, list-view-container, list-view-header, list-view-heading, * list-view-filter, list-view-filter-button, list-view-list, list-view-item, * list-view-connector, list-view-avatar, list-view-content, list-view-action, * list-view-actor, list-view-verb, list-view-target, list-view-timestamp, * list-view-details * @variant activity-feed * * @registryDependencies button badge * @dependencies lucide-react */ import * as React from "react" import { User, Trash2, Pencil, Plus, Eye, MessageCircle, } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ type ActionType = "create" | "update" | "delete" | "view" | "comment" interface ActivityItem { id: string actor: string action: ActionType target: string timestamp: string details?: string } interface ListView05Props { heading?: string filters?: ActionType[] activeFilter?: ActionType | "all" activities?: ActivityItem[] onFilterChange?: (filter: ActionType | "all") => void className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultActivities: ActivityItem[] = [ { id: "act-1", actor: "Sarah Chen", action: "create", target: "Q4 Marketing Plan", timestamp: "2 min ago", details: "Added 12 new tasks" }, { id: "act-2", actor: "Mike Ross", action: "comment", target: "Design Review", timestamp: "15 min ago", details: "Looks great! Let's ship it." }, { id: "act-3", actor: "Emma Wilson", action: "update", target: "Product Roadmap", timestamp: "1 hour ago" }, { id: "act-4", actor: "Alex Kim", action: "delete", target: "Old Templates", timestamp: "2 hours ago", details: "Removed 5 outdated items" }, { id: "act-5", actor: "Lisa Park", action: "view", target: "Annual Report", timestamp: "3 hours ago" }, { id: "act-6", actor: "David Lee", action: "create", target: "New Feature Request", timestamp: "5 hours ago" }, ] const actionConfig: Record = { create: { icon: Plus, verb: "created", color: "bg-green-500" }, update: { icon: Pencil, verb: "updated", color: "bg-blue-500" }, delete: { icon: Trash2, verb: "deleted", color: "bg-red-500" }, view: { icon: Eye, verb: "viewed", color: "bg-purple-500" }, comment: { icon: MessageCircle, verb: "commented on", color: "bg-amber-500" }, } // ============================================================================ // COMPONENT // ============================================================================ function ListView05({ heading = "Activity", filters = ["create", "update", "delete", "view", "comment"], activeFilter = "all", activities = defaultActivities, onFilterChange, className, idBase = "list-view-05", }: ListView05Props) { const headingId = `${idBase}-heading` const filteredActivities = activeFilter === "all" ? activities : activities.filter((a) => a.action === activeFilter) return (

{/* Header */}

{heading}

{/* Filters */}

{filters.map((filter) => ( ))}

{/* Activity List */}

{filteredActivities.map((activity, index) => { const config = actionConfig[activity.action] const Icon = config.icon const isLast = index === filteredActivities.length - 1 return (

{/* Timeline Connector */} {!isLast && (

)} {/* Avatar */}

{/* Content */}

{activity.actor} {" "} {config.verb} {" "} {activity.target}

{activity.details && (

{activity.details}

)} {activity.timestamp}

) })}

) } export default ListView05 export { ListView05, type ListView05Props }