import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs"
import { Story } from "@/components/Story";
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
import { ToastDemo } from "./ToastBlocks/Preview";
import Examples from "./ToastBlocks/Examples";

# Toast
A brief message alert to inform users about events or actions.

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <ToastDemo />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
    </TabContent>
</TabProvider>

## Installation

1. Create a new file `Toast.tsx` in your component folder.
2. Copy and paste the following code into the file.

<LoadedCode from={`${GITHUB}/packages/react/components/Toast.tsx`} />

## Usage

```tsx
import { Toaster } from "@components/Toast";
```

```html
<Toaster />
```

> Note:
> 
> You can put Toaster in anywhere. It will automatically go to document.body through portal.
> But, it is recommended to place it at the root of the application, just once.

---

```tsx
import { useToast } from "@components/Toast";

function App() {
    const { toast } = useToast();
    return <button onClick={() => toast("Hello, world!")}>Toast</button>;
}
```

## Props

### Toaster

#### Special

| Prop | Type | Default | Description |
| :--- | :--- | :------ | :---------- |
| `defaultOption` | `Partial<ToastOption>` | `defaultToastOption` | Global options for toast. |

```ts
interface ToastOption {
  closeButton: boolean;
  closeTimeout: number | null;
}

const defaultToastOption: ToastOption = {
  closeButton: true,
  closeTimeout: 3000,
};
```

## Examples

### Normal

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Examples.Normal />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
    </TabContent>
</TabProvider>

### Success

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Examples.Success />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
    </TabContent>
</TabProvider>

### Error

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Examples.Error />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
    </TabContent>
</TabProvider>

### Warning

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Examples.Warning />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
    </TabContent>
</TabProvider>

### Pending - Fail

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Examples.PendingFail />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
    </TabContent>
</TabProvider>

### Pending - Success

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Examples.PendingSuccess />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
    </TabContent>
</TabProvider>