import { Layout, Playground, Attributes } from 'lib/components'
import { Card, Spacer, Link, Image, Text, Divider, Code, Grid } from 'components'

export const meta = {
  title: 'Card',
  group: 'Surfaces',
}

## Card

A common container component.

<Playground
  title="Basic"
  scope={{ Card }}
  code={`
<Card>
  <p>A basic card.</p>
</Card>
`}
/>

<Playground
  title="Hoverable"
  scope={{ Card }}
  code={`
<Card hoverable>
  <p>hoverable card.</p>
</Card>
`}
/>

<Playground
  title="Shadow"
  scope={{ Card, Text }}
  code={`
<Card shadow>
  <Text h4 my={0}>HTTP is extensible</Text>
  <Text>Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with. New functionality can even be introduced by a simple agreement between a client and a server about a new header's semantics.</Text>
</Card>
`}
/>

<Playground
  title="Types"
  desc="Show different states with colors."
  scope={{ Card, Grid, Text }}
  code={`
() => {
  const types = ['secondary', 'success', 'warning', 'error', 'dark', 'alert', 'purple', 'violet', 'cyan']
  return (
    <Grid.Container gap={1.5}>
      {types.map(type => (
        <Grid xs={8} key={type}>
          <Card type={type} width="100%">
            <Text h4 my={0} style={{ textTransform: 'uppercase' }}>{type}</Text>
            <Text>{type}</Text>
          </Card>
        </Grid>
      ))}
    </Grid.Container>
  )
}
`}
/>

<Playground
  title="With Footer"
  scope={{ Card, Link, Grid, Text }}
  code={`
<Grid.Container gap={1.5}>
  <Grid xs={12} justify="center">
    <Card width="100%">
      <Text h4 my={0}>Geist UI React</Text>
      <Text>Modern and minimalist React UI library.</Text>
      <Card.Footer>
        <Link color target="_blank" href="https://github.com/geist-org/geist-ui">Visit source code on GitHub.</Link>
      </Card.Footer>
    </Card>
  </Grid>
  <Grid xs={12} justify="center">
    <Card width="100%" type="dark">
      <Text h4 my={0}>Geist UI React</Text>
      <Text>Modern and minimalist React UI library.</Text>
      <Card.Footer>
        <Link target="_blank" href="https://github.com/geist-org/geist-ui">Visit source code on GitHub.</Link>
      </Card.Footer>
    </Card>
  </Grid>
</Grid.Container>
`}
/>

<Playground
  title="With Image"
  scope={{ Card, Link, Spacer, Text, Image }}
  code={`
<Card width="400px">
  <Image src="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png"
   height="200px" width="400px" draggable={false} />
  <Text h4 mb={0}>Geist UI React</Text>
  <Text type="secondary" small>Modern and minimalist React UI library.</Text>
  <Card.Footer>
    <Link block target="_blank" href="https://github.com/geist-org/geist-ui">Visit source code on GitHub.</Link>
  </Card.Footer>
</Card>
`}
/>

<Playground
  title="With Divider"
  desc="Show different types of content using `Divider`"
  scope={{ Card, Text, Divider, Code }}
  code={`
<Card width="400px">
  <Card.Content>
    <Text b my={0}>Description</Text>
  </Card.Content>
  <Divider h="1px" my={0} />
  <Card.Content>
    <Text>The Object constructor creates an object wrapper for the given value.</Text>
    <Text>When called in a non-constructor context, Object behaves identically to <Code>new Object()</Code>.</Text>
  </Card.Content>
</Card>
`}
/>

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

| Attribute     | Description         | Type                  | Accepted values         | Default   |
| ------------- | ------------------- | --------------------- | ----------------------- | --------- |
| **hoverable** | add effect on hover | `boolean`             | -                       | `false`   |
| **shadow**    | show shadow         | `boolean`             | -                       | `false`   |
| **type**      | card type           | [CardType](#cardtype) | -                       | `default` |
| ...           | native props        | `HTMLAttributes`      | `'id', className', ...` | -         |

<Attributes.Title alias="Card.Body">Card.Content.Props</Attributes.Title>

| Attribute | Description  | Type             | Accepted values         | Default |
| --------- | ------------ | ---------------- | ----------------------- | ------- |
| ...       | native props | `HTMLAttributes` | `'id', className', ...` | -       |

<Attributes.Title alias="Card.Actions">Card.Footer.Props</Attributes.Title>

| Attribute             | Description                   | Type             | Accepted values         | Default |
| --------------------- | ----------------------------- | ---------------- | ----------------------- | ------- |
| **disableAutoMargin** | cancel automatic margin value | `boolean`        | -                       | `false` |
| ...                   | native props                  | `HTMLAttributes` | `'id', className', ...` | -       |

<Attributes.Title>CardType</Attributes.Title>

```ts
type CardType =
  | 'default'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'dark'
  | 'lite'
  | 'alert'
  | 'purple'
  | 'violet'
  | 'cyan'
```

</Attributes>

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