export const title = "Section footer components"
export const description = "Powerful and customizable React section footer components built for modern applications and websites. These section footers are built using React Aria and styled with Tailwind CSS."

import * as Demos from "@/components/application/section-footers/section-footers.demo.tsx";

<PreviewAndCode title="Section footer example" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/section-footers/section-button-group" height={317} className="rounded-[20px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="section-footers/SectionButtonGroup" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this section footer 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 section-footer
        ```
    </TabPanel>

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

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

## Section footer examples

Below are examples and variations of this section footer component:

### Section footer button group {{ tocOnly:true }}

<PreviewAndCode title="Section footer button group" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/section-footers/section-button-group" height={317} className="rounded-[20px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="section-footers/SectionButtonGroup" />
    </TabPanel>
</PreviewAndCode>

### Section footer {{ tocOnly:true }}

<PreviewAndCode title="Section footer" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/section-footers/section" height={317} className="rounded-[20px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="section-footers/Section" />
    </TabPanel>
</PreviewAndCode>

### Section footer card button group {{ tocOnly:true }}

<PreviewAndCode title="Section footer card button group" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/section-footers/card-button-group" height={329} className="rounded-[20px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="section-footers/CardButtonGroup" />
    </TabPanel>
</PreviewAndCode>

### Section footer card {{ tocOnly:true }}

<PreviewAndCode title="Section footer card" isPublic={false}>
    <ResizablePreview enable id="preview" className="min-h-[320px]">
        <ResponsiveIframe src="/react/iframe/section-footers/card" height={329} className="rounded-[20px] ring-1 ring-secondary bg-primary" />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="section-footers/Card" />
    </TabPanel>
</PreviewAndCode>