{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "activity-feed-05",
  "dependencies": ["lucide-react"],
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "card",
    "https://dashboardblocks.com/r/activity-feed.json",
    "https://dashboardblocks.com/r/icon.json"
  ],
  "files": [
    {
      "path": "registry/components/dashboardblocks/activity-feed/activity-feed-05.tsx",
      "content": "import {\n  ActivityFeedContent,\n  ActivityFeedItem,\n  ActivityFeedTimeline,\n} from '@/registry/components/dashboardblocks/activity-feed'\nimport { Icons } from '@/registry/components/dashboardblocks/icon'\nimport { ArrowRight, MessageSquare, Smile } from 'lucide-react'\nimport { ReactNode } from 'react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'\n\ntype Platform = 'slack' | 'github'\n\ninterface SocialEvent {\n  id: number\n  author: string\n  description: string\n  channel: string\n  time: string\n  platform: Platform\n  avatar: string\n  extra?: ReactNode\n}\n\ninterface ActivityFeed05Props {\n  title: string\n  events: SocialEvent[]\n}\n\nconst exampleProps: ActivityFeed05Props = {\n  title: 'Social Activity',\n  events: [\n    {\n      id: 1,\n      author: 'Wanda Maximoff',\n      description: 'added comment in',\n      channel: 'Welcome',\n      time: '11:08 AM',\n      platform: 'slack',\n      avatar: '/images/women.jpg',\n    },\n    {\n      id: 2,\n      author: 'Tiffany Heyman',\n      description: 'created pull request #278 in',\n      channel: 'LGLabGreg/dashboardblocks',\n      time: '10:55 AM',\n      platform: 'github',\n      avatar: '/images/women.jpg',\n      extra: (\n        <Button variant='outline' size='sm'>\n          Start review\n        </Button>\n      ),\n    },\n    {\n      id: 3,\n      author: 'Neil Robertson',\n      description: 'added reaction 🔥 in',\n      channel: '#showcase',\n      time: '10:30 AM',\n      platform: 'slack',\n      avatar: '/images/man.jpg',\n    },\n    {\n      id: 4,\n      author: 'Amelia Earhart',\n      description: 'sent message to thread in channel',\n      channel: '#product-roadmap',\n      time: '9:15 AM',\n      platform: 'slack',\n      avatar: '/images/women.jpg',\n      extra: (\n        <Card className='py-4 rounded-md'>\n          <CardContent className='px-4 space-y-4'>\n            <div className='flex items-center gap-2'>\n              <Badge variant='outline'># marketing</Badge>\n              <Badge variant='outline'># design</Badge>\n            </div>\n            <p className='text-sm'>\n              Hello everyone, just shipped the new onboarding flow! Would love feedback on\n              the empty states before we roll out to everyone.\n            </p>\n            <div className='flex items-center gap-2 text-xs text-muted-foreground font-medium'>\n              <div className='flex items-center gap-1'>\n                <Smile className='size-4' />2 reactions\n              </div>\n              <div className='flex items-center gap-1'>\n                <MessageSquare className='size-4' />3 replies\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      ),\n    },\n    {\n      id: 5,\n      author: 'Tomasz Grzyb',\n      description: 'created release v0.3.2 in',\n      channel: 'LGLabGreg/dashboardblocks',\n      time: '8:45 AM',\n      platform: 'github',\n      avatar: '/images/man.jpg',\n    },\n  ],\n}\n\nconst ActivityFeed05 = (props: ActivityFeed05Props) => {\n  const { title, events } = props\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle className='flex items-center justify-between'>\n          {title}\n          <Button variant='outline' size='sm'>\n            View all\n            <ArrowRight />\n          </Button>\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <ActivityFeedTimeline lineClassName='left-4'>\n          {events.map((event) => {\n            const PlatformIcon = Icons[event.platform as keyof typeof Icons]\n            return (\n              <div key={event.id}>\n                <ActivityFeedItem size='sm'>\n                  <Avatar className='size-8'>\n                    <AvatarImage src={event.avatar} alt={event.author} />\n                    <AvatarFallback>{event.author.slice(0, 2)}</AvatarFallback>\n                  </Avatar>\n                  <ActivityFeedContent className='pt-1.5 space-y-4'>\n                    <p>\n                      <span className='font-medium'>{event.author}</span>{' '}\n                      <span className='text-muted-foreground'>{event.description}</span>{' '}\n                      <span className='font-medium'>{event.channel}</span>{' '}\n                      <PlatformIcon className='inline-flex size-4 mx-0.5 -mt-0.5' />{' '}\n                      <span className='text-xs text-muted-foreground'>{event.time}</span>\n                    </p>\n                    {event.extra}\n                  </ActivityFeedContent>\n                </ActivityFeedItem>\n              </div>\n            )\n          })}\n        </ActivityFeedTimeline>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport {\n  ActivityFeed05,\n  exampleProps as activityFeed05ExampleProps,\n  type ActivityFeed05Props,\n  type SocialEvent,\n  type Platform,\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}