​
Activity Feed Component

The ActivityFeed component displays a list of events and offers actions like bookmarking, commenting, sharing, and assigning tasks.

​
Basic Usage

import React from 'react';
import { ActivityFeed, type ActivityItem } from '@repo/design-system/components/activity-feed';

const activities: ActivityItem[] = [
  { id: 1, type: 'task', description: 'Completed quarterly report', timestamp: '2 hours ago' },
  { id: 2, type: 'deal', description: 'Closed deal with Acme Corp', timestamp: '5 hours ago', value: 15000 },
];

export default function FeedExample() {
  return (
    <ActivityFeed
      activities={activities}
      title="Recent Activity"
      description="Track key events impacting your metrics"
    />
  );
}

​
Tour Integration

You can integrate the Tour component to guide users through the feed:

import React from 'react';
import { ActivityFeed, type ActivityItem } from '@repo/design-system/components/activity-feed';
import type { TourStep } from '@repo/design-system/components/ui/tour';

const steps: TourStep[] = [
  { id: 'activity-feed-title', title: 'Feed Title', description: 'This is the feed title.' },
  { id: 'activity-item-1', title: 'First Item', description: 'Here is your first activity.' },
];

export default function FeedWithTour() {
  return (
    <ActivityFeed activities={activities} tourSteps={steps} />
  );
}