export const title = "Notification components"
export const description = "Powerful and customizable React notification components built for modern applications and websites. These notifications are built using Sonner and styled with Tailwind CSS."
export const links = {
    sonner: "https://sonner.emilkowal.ski/",
}

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

export const Hint = () => (
    <div className="absolute pointer-events-none bottom-4 left-1/2 flex -translate-x-1/2 items-center gap-1 text-sm font-medium text-quaternary">
        <svg className="-mt-[3px] size-5 text-inherit" viewBox="0 0 24 24" fill="none">
            <path
                d="M9 3.5V2M5.06066 5.06066L4 4M5.06066 13L4 14.0607M13 5.06066L14.0607 4M3.5 9H2M15.8645 16.1896L13.3727 20.817C13.0881 21.3457 12.9457 21.61 12.7745 21.6769C12.6259 21.7349 12.4585 21.7185 12.324 21.6328C12.1689 21.534 12.0806 21.2471 11.9038 20.6733L8.44519 9.44525C8.3008 8.97651 8.2286 8.74213 8.28669 8.58383C8.33729 8.44595 8.44595 8.33729 8.58383 8.2867C8.74213 8.22861 8.9765 8.3008 9.44525 8.44519L20.6732 11.9038C21.247 12.0806 21.5339 12.169 21.6327 12.324C21.7185 12.4586 21.7348 12.6259 21.6768 12.7745C21.61 12.9458 21.3456 13.0881 20.817 13.3728L16.1896 15.8645C16.111 15.9068 16.0717 15.9279 16.0374 15.9551C16.0068 15.9792 15.9792 16.0068 15.9551 16.0374C15.9279 16.0717 15.9068 16.111 15.8645 16.1896Z"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
            />
        </svg>
        <p>Click to trigger a toast</p>
    </div>
);

<PreviewAndCode title="Notification example" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 relative items-center justify-center h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.DefaultNotificationDemo />

        <Hint />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="notifications/DefaultNotificationDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

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

    <TabPanel id="manual">
        <Steps>
            <Step title="Install dependencies">
                As our notifications component is built with [Sonner](https://sonner.emilkowal.ski/), you'll need to install the dependencies:
                ```bash
                npm install sonner
                ```
            </Step>
            <Step title="Copy component files">
                Copy the files below into your project:

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

<Divider />

## Notifications examples

Below are examples and variations of this notifications component:

### Icon default {{ tocOnly:true }}

<PreviewAndCode title="Icon default" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 relative items-center justify-center h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.DefaultNotificationDemo />

        <Hint />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="notifications/DefaultNotificationDemo" />
    </TabPanel>
</PreviewAndCode>

### Icon gray {{ tocOnly:true }}

<PreviewAndCode title="Icon gray" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 relative items-center justify-center h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.GrayNotificationDemo />

        <Hint />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="notifications/GrayNotificationDemo" />
    </TabPanel>
</PreviewAndCode>

### Icon brand {{ tocOnly:true }}

<PreviewAndCode title="Icon brand" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 relative items-center justify-center h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.BrandNotificationDemo />

        <Hint />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="notifications/BrandNotificationDemo" />
    </TabPanel>
</PreviewAndCode>

### Icon error {{ tocOnly:true }}

<PreviewAndCode title="Icon error" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 relative items-center justify-center h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ErrorNotificationDemo />

        <Hint />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="notifications/ErrorNotificationDemo" />
    </TabPanel>
</PreviewAndCode>

### Icon warning {{ tocOnly:true }}

<PreviewAndCode title="Icon warning" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 relative items-center justify-center h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.WarningNotificationDemo />

        <Hint />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="notifications/WarningNotificationDemo" />
    </TabPanel>
</PreviewAndCode>

### Icon success {{ tocOnly:true }}

<PreviewAndCode title="Icon success" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 relative items-center justify-center h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SuccessNotificationDemo />

        <Hint />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="notifications/SuccessNotificationDemo" />
    </TabPanel>
</PreviewAndCode>

### Progress notification {{ tocOnly:true }}

<PreviewAndCode title="Progress notification" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 relative items-center justify-center h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ProgressNotificationDemo />

        <Hint />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="notifications/ProgressNotificationDemo" />
    </TabPanel>
</PreviewAndCode>

### Image notification {{ tocOnly:true }}

<PreviewAndCode title="Image notification" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 relative items-center justify-center h-[420px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ImageNotificationDemo />

        <Hint />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="notifications/ImageNotificationDemo" />
    </TabPanel>
</PreviewAndCode>

### Avatar notification {{ tocOnly:true }}

<PreviewAndCode title="Avatar notification" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 relative items-center justify-center h-[360px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.AvatarNotificationDemo />

        <Hint />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="notifications/AvatarNotificationDemo" />
    </TabPanel>
</PreviewAndCode>