activity-feed-01

1import {
2  ActivityFeedContent,
3  ActivityFeedItem,
4} from '@/registry/components/dashboardblocks/activity-feed'
5import { Icon } from '@/registry/components/dashboardblocks/icon'
6import { Bell, DollarSign, FileText, LucideIcon, Settings, UserPlus } from 'lucide-react'
7 
8import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
9import { Badge } from '@/components/ui/badge'
10import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
11 
12import { cn } from '@/lib/utils'
13 
14interface Activity {
15  id: number
16  user: string
17  avatar: string
18  action: string
19  target: string
20  time: string
21  icon: LucideIcon
22  iconColor: string
23}
24 
25interface ActivityFeed01Props {
26  title: string
27  badgeCount: number
28  activities: Activity[]
29}
30 
31const exampleProps: ActivityFeed01Props = {
32  title: 'Recent Activity',
33  badgeCount: 4,
34  activities: [
35    {
36      id: 1,
37      user: 'Sarah Chen',
38      avatar: '/images/women.jpg',
39      action: 'created a new document',
40      target: 'Q4 Revenue Report',
41      time: '2 minutes ago',
42      icon: FileText,
43      iconColor: 'text-blue-600 bg-blue-600/10',
44    },
45    {
46      id: 2,
47      user: 'Michael Scott',
48      avatar: '/images/man.jpg',
49      action: 'invited',
50      target: 'Jim Halpert',
51      time: '15 minutes ago',
52      icon: UserPlus,
53      iconColor: 'text-teal-600 bg-teal-600/10',
54    },
55    {
56      id: 3,
57      user: 'Pam Beesly',
58      avatar: '/images/women.jpg',
59      action: 'updated settings for',
60      target: 'Marketing Campaign',
61      time: '1 hour ago',
62      icon: Settings,
63      iconColor: 'text-orange-600 bg-orange-600/10',
64    },
65    {
66      id: 4,
67      user: 'Dwight Schrute',
68      avatar: '/images/man.jpg',
69      action: 'processed payment of',
70      target: '$2,450.00',
71      time: '3 hours ago',
72      icon: DollarSign,
73      iconColor: 'text-violet-600 bg-violet-600/10',
74    },
75  ],
76}
77 
78const ActivityFeed01 = (props: ActivityFeed01Props) => {
79  const { title, badgeCount, activities } = props
80  return (
81    <Card>
82      <CardHeader>
83        <CardTitle className='flex items-center justify-between'>
84          {title}
85          <Badge variant='secondary' className='bg-blue-600 text-white'>
86            <Bell />
87            {badgeCount} New
88          </Badge>
89        </CardTitle>
90      </CardHeader>
91      <CardContent className='space-y-4'>
92        {activities.map((activity) => {
93          const ActivityIcon = activity.icon
94          return (
95// … truncated