export const title = "Content divider components"
export const description = "Powerful and customizable React content divider components built for modern applications and websites. These content dividers are built using React Aria and styled with Tailwind CSS."

import * as Demos from "@/components/application/content-divider/content-divider.demo.tsx";

<PreviewAndCode title="Content divider example" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-8 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.DefaultDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="content-divider/DefaultDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this content dividers component using our CLI or manually:

<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 content-divider
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

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

<Divider />

## Content dividers examples

Below are examples and variations of this content dividers component:

### Single line {{ tocOnly:true }}

<PreviewAndCode title="Single line" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-8 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SingleLineDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="content-divider/SingleLineDemo" />
    </TabPanel>
</PreviewAndCode>

### Dual line {{ tocOnly:true }}

<PreviewAndCode title="Dual line" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 p-8 items-center justify-center min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.DualLineDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="content-divider/DualLineDemo" />
    </TabPanel>
</PreviewAndCode>

### Background fill {{ tocOnly:true }}

<PreviewAndCode title="Background fill" isPublic={false}>
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-8 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.BackgroundFillDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="content-divider/BackgroundFillDemo" />
    </TabPanel>
</PreviewAndCode>