export const title = "Empty state components"
export const description = "Powerful and customizable React empty state components built for modern applications and websites. These empty states are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/application/empty-state",
    rac: "https://react-spectrum.adobe.com/react-aria/RadioGroup.html"
}

import * as Demos from "@/components/application/empty-state/empty-state.demo.tsx";

<PreviewAndCode title="Empty state example" isPublic={false}>
    <ResizablePreview id="preview" className="flex py-32 min-h-[360px] items-center justify-center gap-3 overflow-hidden rounded-[20px] ring-1 ring-inset ring-secondary bg-primary px-8">
        <Demos.FeaturedIconDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="empty-state/FeaturedIconDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this empty states 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 empty-state
        ```
    </TabPanel>

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

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

<Divider />

## Empty states examples

Below are examples and variations of this empty states component:

### Featured icon {{ tocOnly:true }}

<PreviewAndCode title="Featured icon" isPublic={false}>
    <ResizablePreview id="preview" className="flex py-32 min-h-[360px] items-center justify-center gap-3 overflow-hidden rounded-[20px] ring-1 ring-inset ring-secondary bg-primary px-8">
        <Demos.FeaturedIconDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="empty-state/FeaturedIconDemo" />
    </TabPanel>
</PreviewAndCode>

### Illustration {{ tocOnly:true }}

<PreviewAndCode title="Illustration" isPublic={false}>
    <ResizablePreview id="preview" className="flex py-32 min-h-[360px] items-center justify-center gap-3 overflow-hidden rounded-[20px] ring-1 ring-inset ring-secondary bg-primary px-8">
        <Demos.IllustrationDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="empty-state/IllustrationDemo" />
    </TabPanel>
</PreviewAndCode>

### File icon {{ tocOnly:true }}

<PreviewAndCode title="File icon" isPublic={false}>
    <ResizablePreview id="preview" className="flex py-32 min-h-[360px] items-center justify-center gap-3 overflow-hidden rounded-[20px] ring-1 ring-inset ring-secondary bg-primary px-8">
        <Demos.FileIconDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="empty-state/FileIconDemo" />
    </TabPanel>
</PreviewAndCode>

### Avatar radius {{ tocOnly:true }}

<PreviewAndCode title="Avatar radius" isPublic={false}>
    <ResizablePreview id="preview" className="flex py-32 min-h-[360px] items-center justify-center gap-3 overflow-hidden rounded-[20px] ring-1 ring-inset ring-secondary bg-primary px-8">
        <Demos.AvatarRadiusDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="empty-state/AvatarRadiusDemo" />
    </TabPanel>
</PreviewAndCode>

### Avatar row {{ tocOnly:true }}

<PreviewAndCode title="Avatar row" isPublic={false}>
    <ResizablePreview id="preview" className="flex py-32 min-h-[360px] items-center justify-center gap-3 overflow-hidden rounded-[20px] ring-1 ring-inset ring-secondary bg-primary px-8">
        <Demos.AvatarRowDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="empty-state/AvatarRowDemo" />
    </TabPanel>
</PreviewAndCode>

### Avatar grid {{ tocOnly:true }}

<PreviewAndCode title="Avatar grid" isPublic={false}>
    <ResizablePreview id="preview" className="flex py-32 min-h-[360px] items-center justify-center gap-3 overflow-hidden rounded-[20px] ring-1 ring-inset ring-secondary bg-primary px-8">
        <Demos.AvatarGridDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="empty-state/AvatarGridDemo" />
    </TabPanel>
</PreviewAndCode>