activity-feed-04

1import {
2  ActivityFeedContent,
3  ActivityFeedIndicator,
4  ActivityFeedItem,
5  ActivityFeedTimeline,
6} from '@/registry/components/dashboardblocks/activity-feed'
7import { ArrowRight, MoreHorizontalIcon } from 'lucide-react'
8 
9import { Button } from '@/components/ui/button'
10import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
11import {
12  DropdownMenu,
13  DropdownMenuContent,
14  DropdownMenuItem,
15  DropdownMenuSeparator,
16  DropdownMenuTrigger,
17} from '@/components/ui/dropdown-menu'
18 
19type EventStatus = 'error' | 'info' | 'progress' | 'success'
20 
21interface TimelineEvent {
22  id: number
23  title: string
24  description: string
25  time: string
26  status: EventStatus
27}
28 
29interface ActivityFeed04Props {
30  title: string
31  events: TimelineEvent[]
32}
33 
34const exampleProps: ActivityFeed04Props = {
35  title: 'Recent Deployments',
36  events: [
37    {
38      id: 1,
39      title: 'Deployment Successful',
40      description: 'Production v2.4.1 deployed to all regions',
41      time: '10:32 AM',
42      status: 'success',
43    },
44    {
45      id: 2,
46      title: 'Build Started',
47      description: 'Building production bundle...',
48      time: '10:30 AM',
49      status: 'progress',
50    },
51    {
52      id: 3,
53      title: 'Critical Alert',
54      description: 'CPU usage exceeded 90% threshold',
55      time: '9:15 AM',
56      status: 'error',
57    },
58    {
59      id: 4,
60      title: 'Performance Optimized',
61      description: 'Cache hit rate improved by 23%',
62      time: '8:45 AM',
63      status: 'info',
64    },
65  ],
66}
67 
68const ActivityFeed04 = (props: ActivityFeed04Props) => {
69  const { title, events } = props
70  return (
71    <Card>
72      <CardHeader>
73        <CardTitle className='flex items-center justify-between'>
74          {title}
75          <Button variant='outline' size='sm'>
76            View all
77            <ArrowRight />
78          </Button>
79        </CardTitle>
80      </CardHeader>
81      <CardContent>
82        <ActivityFeedTimeline linePosition='center'>
83          {events.map((event) => {
84            return (
85              <ActivityFeedItem key={event.id}>
86                <div className='mt-0.5 flex w-14 justify-end text-center text-xs text-muted-foreground'>
87                  {event.time}
88                </div>
89                <ActivityFeedIndicator status={event.status} variant='ring' />
90                <ActivityFeedContent>
91                  <div className='space-y-1'>
92                    <p className='font-medium leading-none'>{event.title}</p>
93// … truncated