activity-feed-02

1import {
2  ActivityFeedContent,
3  ActivityFeedItem,
4  ActivityFeedTimeline,
5} from '@/registry/components/dashboardblocks/activity-feed'
6import { Icon } from '@/registry/components/dashboardblocks/icon'
7import {
8  AlertCircle,
9  ArrowRight,
10  CheckCircle2,
11  Clock,
12  LucideIcon,
13  Zap,
14} from 'lucide-react'
15 
16import { Button } from '@/components/ui/button'
17import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
18 
19type EventStatus = 'success' | 'progress' | 'error' | 'info'
20 
21interface DeploymentEvent {
22  id: number
23  title: string
24  description: string
25  time: string
26  status: EventStatus
27  icon: LucideIcon
28}
29 
30interface ActivityFeed02Props {
31  title: string
32  events: DeploymentEvent[]
33}
34 
35const statusStyles: Record<EventStatus, string> = {
36  success: 'border-green-500 bg-green-100 text-green-500',
37  progress: 'border-blue-500 bg-blue-100 text-blue-500',
38  error: 'border-red-500 bg-red-100 text-red-500',
39  info: 'border-purple-500 bg-purple-100 text-purple-500',
40}
41 
42const exampleProps: ActivityFeed02Props = {
43  title: 'Recent Deployments',
44  events: [
45    {
46      id: 1,
47      title: 'Deployment Successful',
48      description: 'Production v2.4.1 deployed to all regions',
49      time: '10:32 AM',
50      status: 'success',
51      icon: CheckCircle2,
52    },
53    {
54      id: 2,
55      title: 'Build Started',
56      description: 'Building production bundle...',
57      time: '10:30 AM',
58      status: 'progress',
59      icon: Clock,
60    },
61    {
62      id: 3,
63      title: 'Critical Alert',
64      description: 'CPU usage exceeded 90% threshold',
65      time: '9:15 AM',
66      status: 'error',
67      icon: AlertCircle,
68    },
69    {
70      id: 4,
71      title: 'Performance Optimized',
72      description: 'Cache hit rate improved by 23%',
73      time: '8:45 AM',
74      status: 'info',
75      icon: Zap,
76    },
77  ],
78}
79 
80const ActivityFeed02 = (props: ActivityFeed02Props) => {
81  const { title, events } = props
82  return (
83    <Card>
84      <CardHeader>
85        <CardTitle className='flex items-center justify-between'>
86          {title}
87          <Button variant='outline' size='sm'>
88            View all
89            <ArrowRight />
90          </Button>
91        </CardTitle>
92      </CardHeader>
93      <CardContent>
94        <ActivityFeedTimeline lineClassName='shadow-xs'>
95          {events.map((event) => {
96            const EventIcon = event.icon
97            return (
98              <ActivityFeedItem key={event.id}>
99// … truncated