ActivityFeed

Description:
The ActivityFeed component is a list of activity items with optional headers, titles, buttons, tabs, dividers, and footers.

Usage:

import React from 'react';
import ActivityFeed from 'blendx-ui/ActivityFeed';

const MyActivityFeed = () => (
  <ActivityFeed>
    <ActivityFeed.Header>Activity Feed</ActivityFeed.Header>
    <ActivityFeed.List>
      <ActivityFeed.Item title="Activity Title" subtitle="Subtitle" description="Description" />
    </ActivityFeed.List>
    <ActivityFeed.Footer linkHref="/settings" linkText="Settings" />
  </ActivityFeed>
);

export default MyActivityFeed;

Components:

ActivityFeed.Header Description: A component to display the header of the activity feed. Usage:
```
<ActivityFeed.Header>Activity Feed Header</ActivityFeed.Header>
```
ActivityFeed.Title Description: A component to display the title of the activity feed. Usage:
```
<ActivityFeed.Title>Activity Feed Title</ActivityFeed.Title>
```

ActivityFeed.ActionButton Description: A button component for actions in the activity feed. Usage:

<ActivityFeed.ActionButton onClick={() => alert('Action!')}>Action</ActivityFeed.ActionButton>

ActivityFeed.TabMenu Description: A menu component for tabs in the activity feed. Usage:

<ActivityFeed.TabMenu variant="pills">
  <ActivityFeed.Tab eventKey="tab1" title="Tab 1">Tab 1 Content</ActivityFeed.Tab>
  <ActivityFeed.Tab eventKey="tab2" title="Tab 2">Tab 2 Content</ActivityFeed.Tab>
</ActivityFeed.TabMenu>

ActivityFeed.Tab Description: A tab component within the tab menu. Usage:

<ActivityFeed.Tab eventKey="tab1" title="Tab 1">Tab 1 Content</ActivityFeed.Tab>

ActivityFeed.Divider Description: A divider component to separate sections in the activity feed. Usage:
```
<ActivityFeed.Divider />
```

ActivityFeed.List Description: A component to contain a list of activity items. Usage:

<ActivityFeed.List>
  <ActivityFeed.Item title="Item 1" subtitle="Subtitle 1" description="Description 1" />
  <ActivityFeed.Item title="Item 2" subtitle="Subtitle 2" description="Description 2" />
</ActivityFeed.List>

ActivityFeed.Item Description: A component for an individual activity item. Usage:

<ActivityFeed.Item
  title="Activity Title"
  subtitle="Activity Subtitle"
  description="Activity Description"
  avatar="https://example.com/avatar.png"
  onClick={() => alert('Item Clicked')}
/>

ActivityFeed.Footer Description: A footer component for the activity feed. Usage:
```
<ActivityFeed.Footer linkHref="/settings" linkText="Settings" />
```

Props:

children (node): The content to be displayed inside the component.
className (string): Additional class names for custom styling.
index (number): The index of the item.
avatar (string): The avatar image URL.
title (string): The title of the item.
subtitle (string): The subtitle of the item.
description (string): The description of the item.
dropdown (node): Dropdown actions for the item.
selected (bool): If true, the item is selected.
onClick (func): Callback function when the item is clicked.
link (string): The URL to navigate to on click.

Example:

<ActivityFeed>
  <ActivityFeed.Header>Activity Feed</ActivityFeed.Header>
  <ActivityFeed.Title>Recent Activities</ActivityFeed.Title>
  <ActivityFeed.ActionButton onClick={() => alert('Action!')}>Action</ActivityFeed.ActionButton>
  <ActivityFeed.TabMenu variant="pills">
    <ActivityFeed.Tab eventKey="tab1" title="Tab 1">Tab 1 Content</ActivityFeed.Tab>
    <ActivityFeed.Tab eventKey="tab2" title="Tab 2">Tab 2 Content</ActivityFeed.Tab>
  </ActivityFeed.TabMenu>
  <ActivityFeed.Divider />
  <ActivityFeed.List>
    <ActivityFeed.Item
      title="Activity Title"
      subtitle="Subtitle"
      description="Description"
      avatar="https://example.com/avatar.png"
      onClick={() => alert('Item Clicked')}
    />
  </ActivityFeed.List>
  <ActivityFeed.Footer linkHref="/settings" linkText="Settings" />
</ActivityFeed>

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	1
frontend-app-dashboard	1

Detailed usage locations:

frontend-app-staff-dashboard

src/pages/notifications/index.jsx

frontend-app-dashboard

src/pages/notifications/index.jsx

ActivityFeed​

Dependencies​

Detailed usage locations:​

ActivityFeed

Dependencies

Detailed usage locations: