export const title = "Activity feed components"
export const description = "Powerful and customizable React activity feed components built for modern applications and websites. These activity feed components are built using React Aria and styled with Tailwind CSS."

import * as Demos from "@/components/application/activity-feed/activity-feed.story.tsx";

<PreviewAndCode title="Activity feed example" isPublic={false}>
    <ResizablePreview id="preview" className="relative flex px-4 md:px-8 h-[600px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div
            className="scrollbar-hide h-full w-full overflow-auto py-10"
        >
            <div className="mx-auto w-full max-w-md">
                <Demos.ActivityFeedDivided />
            </div>
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="scrollbar-hide max-h-[700px]" component="activity-feed/ActivityFeedDivided" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

Some activity feeds components depend on other components to function properly. Before using them, make sure to add the required components via CLI.

Use the following command to install them:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add activity-feed
        ```
    </TabPanel>
    
    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/activity-feed" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the activity feed component in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Activity feed examples

Below are examples and variations of this activity feeds component:

### Activity feed divided {{ tocOnly:true }}

<PreviewAndCode title="Activity feed divided" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center px-4 md:px-8 h-[600px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="h-full w-full py-10 scrollbar-hide overflow-auto">
            <div className="w-full max-w-md mx-auto">
                <Demos.ActivityFeedDivided />
            </div>
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCode className="scrollbar-hide max-h-[700px]" component="activity-feed/ActivityFeedDivided" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the activity feed components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</PreviewAndCode>

### Activity feed connected {{ tocOnly:true }}

<PreviewAndCode title="Activity feed connected" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center px-4 md:px-8 h-[600px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="h-full w-full py-10 scrollbar-hide overflow-auto">
            <div className="w-full max-w-md mx-auto">
                <Demos.ActivityFeedConnected />
            </div>
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="scrollbar-hide max-h-[700px]" component="activity-feed/ActivityFeedConnected" />
    </TabPanel>
</PreviewAndCode>

### Activity feed spaced {{ tocOnly:true }}

<PreviewAndCode title="Activity feed spaced" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center px-4 md:px-8 h-[600px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="h-full w-full py-10 scrollbar-hide overflow-auto">
            <div className="w-full max-w-md mx-auto">
                <Demos.ActivityFeedSpaced />
            </div>
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="scrollbar-hide max-h-[700px]" component="activity-feed/ActivityFeedSpaced" />
    </TabPanel>
</PreviewAndCode>

### Messages divided {{ tocOnly:true }}

<PreviewAndCode title="Messages divided" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center px-4 md:px-8 h-[600px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="h-full w-full py-10 scrollbar-hide overflow-auto">
            <div className="w-full max-w-md mx-auto">
                <Demos.MessagesDivided />
            </div>
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="scrollbar-hide max-h-[700px]" component="activity-feed/MessagesDivided" />
    </TabPanel>
</PreviewAndCode>

### Messages connected {{ tocOnly:true }}

<PreviewAndCode title="Messages connected" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center px-4 md:px-8 h-[600px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="h-full w-full py-10 scrollbar-hide overflow-auto">
            <div className="w-full max-w-md mx-auto">
                <Demos.MessagesConnected />
            </div>
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="scrollbar-hide max-h-[700px]" component="activity-feed/MessagesConnected" />
    </TabPanel>
</PreviewAndCode>

### Messages spaced {{ tocOnly:true }}

<PreviewAndCode title="Messages spaced" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center px-4 md:px-8 h-[600px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="h-full w-full py-10 scrollbar-hide overflow-auto">
            <div className="w-full max-w-md mx-auto">
                <Demos.MessagesSpaced />
            </div>
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode className="scrollbar-hide max-h-[700px]" component="activity-feed/MessagesSpaced" />
    </TabPanel>
</PreviewAndCode>