activity-feed-03

1import {
2  ActivityFeedContent,
3  ActivityFeedItem,
4} from '@/registry/components/dashboardblocks/activity-feed'
5import { ArrowRight } from 'lucide-react'
6 
7import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
8import { Button } from '@/components/ui/button'
9import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
10 
11import { cn } from '@/lib/utils'
12 
13interface UserActivity {
14  id: number
15  user: {
16    name: string
17    avatar: string
18    initials: string
19  }
20  action: string
21  time: string
22}
23 
24interface ActivityFeed03Props {
25  title: string
26  activities: UserActivity[]
27}
28 
29const exampleProps: ActivityFeed03Props = {
30  title: 'Recent Activity',
31  activities: [
32    {
33      id: 1,
34      user: { name: 'Sarah Chen', avatar: '/images/women.jpg', initials: 'SC' },
35      action: 'commented on Design System v2',
36      time: '2m',
37    },
38    {
39      id: 2,
40      user: { name: 'Michael Torres', avatar: '/images/man.jpg', initials: 'MT' },
41      action: 'assigned you a task',
42      time: '15m',
43    },
44    {
45      id: 3,
46      user: { name: 'Emma Wilson', avatar: '/images/women.jpg', initials: 'EW' },
47      action: 'scheduled Q1 Planning Review',
48      time: '1h',
49    },
50    {
51      id: 4,
52      user: { name: 'Alex Kumar', avatar: '/images/man.jpg', initials: 'AK' },
53      action: 'completed Sprint 24',
54      time: '2h',
55    },
56  ],
57}
58 
59const ActivityFeed03 = (props: ActivityFeed03Props) => {
60  const { title, activities } = props
61  return (
62    <Card>
63      <CardHeader>
64        <CardTitle className='flex items-center justify-between'>
65          {title}
66          <Button variant='outline' size='sm'>
67            View all
68            <ArrowRight />
69          </Button>
70        </CardTitle>
71      </CardHeader>
72      <CardContent className='space-y-2'>
73        {activities.map((activity, index) => (
74          <div key={activity.id}>
75            <ActivityFeedItem
76              align='center'
77              className={cn(
78                'pb-2',
79                index < activities.length - 1 && 'border-b border-border',
80              )}
81              size='sm'
82            >
83              <Avatar className='h-8 w-8 shrink-0'>
84                <AvatarImage src={activity.user.avatar} alt={activity.user.name} />
85                <AvatarFallback className='text-xs'>
86                  {activity.user.initials}
87                </AvatarFallback>
88              </Avatar>
89              <ActivityFeedContent className='truncate' layout='inline'>
90// … truncated