import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Switch } from "@/components/ui/switch"; import { Filter, Tag, FileText, MessageSquare, User } from "lucide-react"; const activityData = [ { id: "1", type: "status_change", user: { name: "Angelina Gotelli", initials: "AG" }, action: "has change", target: "PD-979", status: { text: "Completed", color: "green" }, timestamp: "06:20 PM", date: "SUNDAY, 06 MARCH" }, { id: "2", type: "comment", user: { name: "Max Alexander", initials: "MA", avatar: "/thoughtful-man.png" }, action: "comment on your", target: "Post", comment: "Fine, Java MIGHT be a good example of what a programming language should be like. But Java applications are good examples of what applications SHOULDN'T be like.", timestamp: "05:53 PM", date: "SUNDAY, 06 MARCH" }, { id: "3", type: "tag_added", user: { name: "Eugene Stewart", initials: "ES" }, action: "added tags", tags: [ { text: "Live Issue", color: "red" }, { text: "Backend", color: "blue" } ], timestamp: "04:40 PM", date: "SUNDAY, 06 MARCH" }, { id: "4", type: "file_added", user: { name: "Shannon Baker", initials: "SB" }, action: "added", target: "document.csv", timestamp: "03:18 PM", date: "SUNDAY, 06 MARCH" }, { id: "5", type: "mention", user: { name: "Roberta Horton", initials: "RH", avatar: "/diverse-woman-portrait.png" }, action: "mentioned you in a comment", target: "Post", comment: "@Carolyn One of the main causes of the fall of the Roman Empire was that-lacking zero-they had no way to indicate successful termination of their C programs.", timestamp: "02:17 PM", date: "SUNDAY, 06 MARCH" }, { id: "6", type: "assignment", user: { name: "Lee Wheeler", initials: "LW" }, action: "assigned ticket", target: "PD-1092", assignee: "Alvin Moreno", timestamp: "11:13 AM", date: "SUNDAY, 06 MARCH" }, { id: "7", type: "comment", user: { name: "Jessica Wells", initials: "JW", avatar: "/woman-flowers.jpg" }, action: "comment on your", target: "Post", comment: "The trouble with programmers is that you can never tell what a programmer is doing until it's too late.", timestamp: "08:49 AM", date: "SATURDAY, 05 MARCH" }, { id: "8", type: "status_change", user: { name: "Earl Miles", initials: "EM", avatar: "/man-beard.jpg" }, action: "has change", target: "PD-977", status: { text: "In progress", color: "blue" }, timestamp: "08:30 AM", date: "SATURDAY, 05 MARCH" } ]; const getStatusColor = (color: string) => { switch (color) { case "green": return "bg-green-100 text-green-800"; case "blue": return "bg-blue-100 text-blue-800"; case "red": return "bg-red-100 text-red-800"; case "orange": return "bg-orange-100 text-orange-800"; default: return "bg-gray-100 text-gray-800"; } }; const getTagColor = (color: string) => { switch (color) { case "red": return "bg-red-500"; case "blue": return "bg-blue-500"; default: return "bg-gray-500"; } }; const getActivityIcon = (type: string) => { switch (type) { case "tag_added": return ; case "file_added": return ; case "comment": case "mention": return ; case "assignment": return ; default: return null; } }; export default function Page() { let currentDate = ""; return (

{/* Header */}

Activity log

Show mentioned only

{/* Activity Timeline */}

{activityData.map((item) => { const showDate = currentDate !== item.date; if (showDate) { currentDate = item.date; } return (

{/* Date Header */} {showDate && (

{item.date}

)} {/* Activity Item */}

{/* Timeline Line */}

{/* Avatar or Icon */}

{item.type === "tag_added" || item.type === "file_added" ? (

{getActivityIcon(item.type)}

) : ( {item.user.initials} )}

{/* Content */}

{item.user.name} {item.action} {item.target && ( {item.target} )} {item.status && ( <> status to

{item.status.text} )} {item.assignee && ( <> to {item.assignee} )}

{item.timestamp}

{/* Tags */} {item.tags && (

{item.tags.map((tag, index) => (

{tag.text}

))}

)} {/* Comment */} {item.comment && (

{item.comment}

)}

); })}

); }