import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
import { Story } from "@/components/Story";
import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode";
import { ButtonDemo } from "./ButtonBlocks/Preview";
import Examples from "./ButtonBlocks/Examples";

# Button
Displays a button or a component that looks like a button.

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <ButtonDemo />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={GITHUB_COMP_PREVIEW("Button")} />
    </TabContent>
</TabProvider>

## Installation

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

<LoadedCode from={GITHUB_COMP("Button")} />

## Usage

```tsx
import { Button } from "@components/Button";
```

```html
<Button>Button</Button>
```

## Props

### Variants

| Prop         | Type                                                                          | Default     | Description                             |
|:-------------|:------------------------------------------------------------------------------|:------------|:----------------------------------------|
| `size`       | `"link" \| "sm" \| "md" \| "lg" \| "icon"`                                    | `"md"`      | The size of the button                  |
| `border`     | `"none" \| "solid" \| "success" \| "warning" \| "danger"`                     | `"solid"`   | The border color of the button          |
| `background` | `"default" \| "ghost" \| "success" \| "warning" \| "danger" \| "transparent"` | `"default"` | The background color of the button      |
| `decoration` | `"none" \| "link"`                                                            | `"none"`    | The inner text decoration of the button |
| `presets`    | `"default" \| "ghost" \| "link" \| "success" \| "warning" \| "danger"`        | `"default"` | The preset of the variant props         |

### Special

| Prop      | Type      | Default | Description                                              |
|:----------|:----------|:--------|:---------------------------------------------------------|
| `asChild` | `boolean` | `false` | Whether the button is rendered as a child of a component |

## Examples

### Default

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Examples.Default />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={GITHUB_STORY("Button", "Default")} />
    </TabContent>
</TabProvider>

### Ghost

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Examples.Ghost />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={GITHUB_STORY("Button", "Ghost")} />
    </TabContent>
</TabProvider>

### Link

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Examples.Link />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={GITHUB_STORY("Button", "Link")} />
    </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_STORY("Button", "Success")} />
    </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_STORY("Button", "Warning")} />
    </TabContent>
</TabProvider>

### Danger

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Examples.Danger />
        </Story>
    </TabContent>
    <TabContent name="code">
        <LoadedCode from={GITHUB_STORY("Button", "Danger")} />
    </TabContent>
</TabProvider>