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

import * as Demos from "@/components/application/metrics/metrics.demo.tsx";

<PreviewAndCode title="Metrics example" isPublic={false}>
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 min-h-[360px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsChart04Demo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsChart04Demo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

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

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

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

<Divider />

## Metrics examples

Below are examples and variations of this metrics component:

### Simple {{ tocOnly:true }}

<PreviewAndCode title="Simple" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsSimpleDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsSimpleDemo" />
    </TabPanel>
</PreviewAndCode>

### Simple actions {{ tocOnly:true }}

<PreviewAndCode title="Simple actions" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsSimpleActionsDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsSimpleActionsDemo" />
    </TabPanel>
</PreviewAndCode>

### Icon 01 {{ tocOnly:true }}

<PreviewAndCode title="Metrics icon 01" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsIcon01Demo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsIcon01Demo" />
    </TabPanel>
</PreviewAndCode>

### Icon actions 01 {{ tocOnly:true }}

<PreviewAndCode title="Metrics icon actions 01" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsIcon01ActionsDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsIcon01ActionsDemo" />
    </TabPanel>
</PreviewAndCode>

### Icon 02 {{ tocOnly:true }}

<PreviewAndCode title="Metrics icon 02" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsIcon02Demo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsIcon02Demo" />
    </TabPanel>
</PreviewAndCode>

### Icon actions 02 {{ tocOnly:true }}

<PreviewAndCode title="Metrics icon actions 02" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsIcon02ActionsDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsIcon02ActionsDemo" />
    </TabPanel>
</PreviewAndCode>

### Icon 03 {{ tocOnly:true }}

<PreviewAndCode title="Metrics icon 03" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsIcon03Demo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsIcon03Demo" />
    </TabPanel>
</PreviewAndCode>

### Icon actions 03 {{ tocOnly:true }}

<PreviewAndCode title="Metrics icon actions 03" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsIcon03ActionsDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsIcon03ActionsDemo" />
    </TabPanel>
</PreviewAndCode>

### Icon 04 {{ tocOnly:true }}

<PreviewAndCode title="Metrics icon 04" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsIcon04Demo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsIcon04Demo" />
    </TabPanel>
</PreviewAndCode>

### Icon actions 04 {{ tocOnly:true }}

<PreviewAndCode title="Metrics icon actions 04" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsIcon04ActionsDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsIcon04ActionsDemo" />
    </TabPanel>
</PreviewAndCode>

### Chart 01 {{ tocOnly:true }}

<PreviewAndCode title="Chart 01" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsChart01Demo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsChart01Demo" />
    </TabPanel>
</PreviewAndCode>

### Chart actions 01 {{ tocOnly:true }}

<PreviewAndCode title="Chart actions 01" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsChart01ActionsDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsChart01ActionsDemo" />
    </TabPanel>
</PreviewAndCode>

### Chart 02 {{ tocOnly:true }}

<PreviewAndCode title="Chart 02" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsChart02Demo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsChart02Demo" />
    </TabPanel>
</PreviewAndCode>

### Chart actions 02 {{ tocOnly:true }}

<PreviewAndCode title="Chart actions 02" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsChart02ActionsDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsChart02ActionsDemo" />
    </TabPanel>
</PreviewAndCode>

### Chart 03 {{ tocOnly:true }}

<PreviewAndCode title="Chart 03" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsChart03Demo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsChart03Demo" />
    </TabPanel>
</PreviewAndCode>

### Chart actions 03 {{ tocOnly:true }}

<PreviewAndCode title="Chart actions 03" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsChart03ActionsDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsChart03ActionsDemo" />
    </TabPanel>
</PreviewAndCode>

### Chart 04 {{ tocOnly:true }}

<PreviewAndCode title="Chart 04" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsChart04Demo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsChart04Demo" />
    </TabPanel>
</PreviewAndCode>

### Chart actions 04 {{ tocOnly:true }}

<PreviewAndCode title="Chart actions 04" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <div className="w-full max-w-sm">
            <Demos.MetricsChart04ActionsDemo />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="metrics/MetricsChart04ActionsDemo" />
    </TabPanel>
</PreviewAndCode>