import { Layout, Playground, Attributes } from 'lib/components'
import { Badge, Spacer, Avatar, Button, Link, useTheme } from 'components'
import NextLink from 'next/link'

export const meta = {
  title: 'Badge',
  group: 'Data Display',
}

## Badge

Display an indicator that requires attention.

<Playground
  scope={{ Badge, Spacer }}
  desc="Show number or text."
  code={`
  <>
    <Badge>1</Badge> <Spacer y={.5} />
    <Badge>50</Badge> <Spacer y={.5} />
    <Badge>100</Badge> <Spacer y={.5} />
    <Badge>2020</Badge>
  </>
`}
/>

<Playground
  title="Type"
  desc="Express state in different colors."
  scope={{ Badge, Spacer }}
  code={`
  <>
    <Badge type="success">Success</Badge> <Spacer y={.5} />
    <Badge type="warning">Warning</Badge> <Spacer y={.5} />
    <Badge type="error">Error</Badge> <Spacer y={.5} />
    <Badge type="secondary">Secondary</Badge>
  </>
`}
/>

<Playground
  title="Custom color"
  desc={
    <>
      For more colors, please refer to the{' '}
      <NextLink href="/en-us/guide/colors">
        <Link color>color section</Link>
      </NextLink>
      .
    </>
  }
  scope={{ Badge, Spacer, useTheme }}
  code={`
() => {
  const theme = useTheme()
  return (
    <>
      <Badge style={{ backgroundColor: theme.palette.successLight }}>Success Light</Badge> <Spacer y={.5} />
      <Badge style={{ backgroundColor: theme.palette.successDark }}>Success Dark</Badge> <Spacer y={.5} />
      <Badge style={{ backgroundColor: theme.palette.alert }}>Alert</Badge> <Spacer y={.5} />
      <Badge style={{ backgroundColor: theme.palette.purple }}>Purple</Badge> <Spacer y={.5} />
      <Badge style={{ backgroundColor: theme.palette.violet }}>Violet</Badge> <Spacer y={.5} />
      <Badge style={{ backgroundColor: theme.palette.cyanLighter, color: theme.palette.foreground }}>Cyan Ligher</Badge> <Spacer y={.5} />
    </>
  )
}
`}
/>

<Playground
  title="Sizes"
  desc="Components of different sizes."
  scope={{ Badge, Spacer }}
  code={`
  <>
    <Badge size="mini">Mini</Badge> <Spacer y={.5} />
    <Badge size="small">Small</Badge> <Spacer y={.5} />
    <Badge size="medium">Medium</Badge> <Spacer y={.5} />
    <Badge size="large">Large</Badge>
  </>
`}
/>

<Playground
  title="Anchor"
  desc="Fix the `Badge` in the designated position."
  scope={{ Badge, Avatar, Spacer, Button, Link }}
  code={`
<>
  <Badge.Anchor>
    <Badge size="mini">10</Badge>
    <Avatar src="/images/avatar.png" />
  </Badge.Anchor>
  <Spacer inline x={1.5} />
  <Badge.Anchor placement="bottomRight">
    <Badge size="mini" type="success">10</Badge>
    <Avatar size={40} isSquare src="/images/avatar.png" />
  </Badge.Anchor>
  <Spacer inline x={1.5} />
  <Badge.Anchor>
    <Badge size="mini" type="warning">99+</Badge>
    <Button size="small" auto>Action</Button>
  </Badge.Anchor>
  <Spacer inline x={1.5} />
  <Badge.Anchor>
    <Badge size="mini" type="error" dot />
    <Link target="_blank" href="https://github.com/geist-org/react/">Geist UI</Link>
  </Badge.Anchor>
  <Spacer inline x={1.5} />
  <Badge.Anchor>
    <Badge size="mini" type="error" dot style={{ padding: '7px' }} />
    <Link target="_blank" href="https://github.com/geist-org/react/">Share Link</Link>
  </Badge.Anchor>
</>
`}
/>

<Attributes edit="/pages/en-us/components/badge.mdx">
<Attributes.Title>Badge.Props</Attributes.Title>

| Attribute | Description                 | Type             | Accepted values                 | Default   |
| --------- | --------------------------- | ---------------- | ------------------------------- | --------- |
| **type**  | badge type                  | `NormalTypes`    | [NormalTypes](#normaltypes)     | `default` |
| **size**  | badge size                  | `NormalSizes`    | [NormalSizes](#normalsizes)     | `medium`  |
| **dot**   | show dot and ignore content | `boolean`        | -                               | `false`   |
| ...       | native props                | `HTMLAttributes` | `'alt', 'id', 'className', ...` | -         |

<Attributes.Title>Badge.Anchor.Props</Attributes.Title>

| Attribute     | Description            | Type              | Accepted values                     | Default    |
| ------------- | ---------------------- | ----------------- | ----------------------------------- | ---------- |
| **placement** | fixe position of Badge | `AnchorPlacement` | [AnchorPlacement](#anchorplacement) | `topRight` |
| ...           | native props           | `HTMLAttributes`  | `'alt', 'id', 'className', ...`     | -          |

<Attributes.Title>NormalTypes</Attributes.Title>

```ts
type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
```

<Attributes.Title>NormalSizes</Attributes.Title>

```ts
type NormalSizes = 'medium' | 'mini' | 'small' | 'large'
```

<Attributes.Title>AnchorPlacement</Attributes.Title>

```ts
type AnchorPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'
```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
