import Layout from '../../components/Layout'
import { ComponentsSidebar } from '../../sidebars'
import { Playground } from '../../components/Playground';
import { Code, Heading, Paragraph } from '@knkui/typography';

export default function Divider() {
    return (
        <Layout
            title="Buttons"
            showHero
            description="A button triggers an event or action. They let users know what will happen next."
            sidebar={ComponentsSidebar}
        >
            <Heading size={800}>Button</Heading>
            <Paragraph>
                The <Code>Button</Code> component is the most common button component. It contains a label and optional icons before or after the label.
            </Paragraph>
            <Playground
                codeText={
`
<Button appearance="default">Hello You!</Button>
`}
            />
            <Heading size={700} is="h3">All button variations</Heading>
            <Paragraph>
                The <Code>Button</Code> component has a <Code>appearance</Code> property with 3 available values:
            </Paragraph>

            <Heading size={600} is="h4">Default Appearance</Heading>
            <Paragraph>
                The default form of a button, used for most cases. They are not impactful enough to represent the primary action in a container.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
`
<div>
    <Button>Hello You!</Button>
    <Button intent="success">Hello You!</Button>
    <Button intent="warning">Hello You!</Button>
    <Button intent="danger">Hello You!</Button>
</div>
`
                }
            />
            <Heading size={600} is="h4">Primary Appearance</Heading>
            <Paragraph>
                Use a <Code>primary</Code> button to call attention to an action on a form or to highlight the strongest call to action on a page. Primary buttons should only appear once per container (not including the application header or in a modal dialog). Not every screen requires a primary button.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
`
<div
    style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
        gap: 16
    }}
>
    <Button appearance="primary">Primary Default</Button>
    <Button appearance="primary" intent="success">Primary Success</Button>
    <Button appearance="primary" intent="warning">Primary Warning</Button>
    <Button appearance="primary" intent="danger">Primary Danger</Button>
</div>
`
                }
            />
            <Heading size={600} is="h4">Minimal Appearance</Heading>
            <Playground
                isOpenByDefault={false}
                codeText={
                    `
<div
    style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
        gap: 16
    }}
>
    <Button appearance="minimal">Minimal Default</Button>
    <Button appearance="minimal" intent="success">Minimal Success</Button>
    <Button appearance="minimal" intent="warning">Minimal Warning</Button>
    <Button appearance="minimal" intent="danger">Minimal Danger</Button>
</div>
`
                }
            />

            <Heading size={600} is="h4">Disabled State</Heading>
            <Paragraph>
                Set <Code>disabled</Code> to disable a button when another action has to be completed before the button is usable, such as changing a text field value or waiting for a system response.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={`<Button disabled>Disabled Button</Button>`}
            />

            <Heading size={600} is="h4">Button Sizes</Heading>
            <Playground
                isOpenByDefault={false}
                codeText={
                    `
<div
    style={{
        display: 'inline-flex',
    }}
>
<div
    style={{
        flex: '1 0 auto',
        display: 'flex',
        marginRight: 4
    }}
>
    <Button appearance="primary" size="compact">Compact Button</Button>
</div>
<div
    style={{
        flex: '1 0 auto',
        display: 'flex',
        marginRight: 4
    }}
>
    <Button appearance="primary" size="default">Default Button</Button>
</div>
</div>
`
                }
            />

            <Heading size={600} is="h4">Button Loading</Heading>
            <Paragraph>
                Set <Code>loading</Code> to indicate the button is loading. The button text is hidden and a spinner is shown in its place, while maintaining the width that it would have if the text were visible.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={`<div><Button appearance="primary">loading</Button> <Button appearance="primary" loading>loading</Button></div>`}
            />
        </Layout>
    )
}