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

export const meta = {
  title: '卡片 Card',
  group: '表面',
}

## Card / 卡片

基础的组件容器。

<Playground
  scope={{ Card }}
  code={`
<Card>
  <p>一个基础的卡片。</p>
</Card>
`}
/>

<Playground
  title="可悬停的"
  scope={{ Card }}
  code={`
<Card hoverable>
  <p>可悬停的卡片。</p>
</Card>
`}
/>

<Playground
  title="阴影"
  scope={{ Card }}
  code={`
<Card shadow>
  <h4>这是一个 React 组件。</h4>
  <p>阴影卡片组件。</p>
</Card>
`}
/>

<Playground
  title="类型"
  desc="以各式色彩表达不同的类型或状态。"
  scope={{ Card, Row, Col }}
  code={`
() => {
  const typeLeft = ['secondary', 'success', 'warning', 'error', 'dark']
  const typeRight = ['alert', 'purple', 'violet', 'cyan', 'lite']
  const locales = {
    secondary: '次要的', success: '成功', warning: '警告', error: '错误', dark: '暗黑',
    alert: '提示', purple: '紫色', violet: '紫罗兰', cyan: '青色', lite: '精简',
  }
  return (
    <>
      {typeLeft.map((left, index) => (
        <Row justify="space-around" key={left} style={{ marginBottom: '18px' }}>
          <Col span="10">
            <Card type={left}>
              <h4 style={{ textTransform: 'capitalize' }}>{locales[left]}</h4>
              <span>{left}</span>
            </Card>
          </Col>
          <Col span="10">
            <Card type={typeRight[index]}>
              <h4 style={{ textTransform: 'capitalize' }}>{locales[typeRight[index]]}</h4>
              <span>{typeRight[index]}</span>
            </Card>
          </Col>
        </Row>
      ))}
    </>
  )
}
`}
/>

<Playground
  title="卡片页脚"
  scope={{ Card, Link, Spacer, Row }}
  code={`
<Row style={{ flexWrap: 'wrap' }} justify="space-around">
  <Card width="330px">
    <h4>Geist UI React</h4>
    <p>现代化、极简风格的 UI 库。</p>
    <Card.Footer>
      <Link color target="_blank" href="https://github.com/geist-org/react">在 GitHub 上查看源码</Link>
    </Card.Footer>
  </Card>
  <Card width="330px" type="dark">
    <h4>Geist UI React</h4>
    <p>现代化、极简风格的 UI 库。</p>
    <Card.Footer>
      <Link target="_blank" href="https://github.com/geist-org/react">在 GitHub 上查看源码</Link>
    </Card.Footer>
  </Card>
</Row>
`}
/>

<Playground
  title="组合图片"
  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="200" width="400" style={{ objectFit: 'cover' }} />
  <Text h4 style={{ marginBottom: '0' }}>Geist UI React</Text>
  <Text type="secondary" small>现代化、极简风格的 UI 库。</Text>
  <Card.Footer>
    <Link block target="_blank" href="https://github.com/geist-org/react">在 GitHub 上查看源码</Link>
  </Card.Footer>
</Card>
`}
/>

<Playground
  title="组合分割线"
  desc="使用分割线展示不同类型的内容。"
  scope={{ Card, Text, Divider, Code }}
  code={`
<Card width="400px">
  <Card.Content>
    <Text b>语法描述</Text>
  </Card.Content>
  <Divider y={0} />
  <Card.Content>
    <Text>Object 构造函数为给定值创建一个对象包装器，返回一个与给定值对应类型的对象。</Text>
    <Text>当以非构造函数形式被调用时，Object 等同于 <Code>new Object()</Code>.</Text>
  </Card.Content>
</Card>
`}
/>

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

| 属性          | 描述                 | 类型                  | 推荐值                  | 默认      |
| ------------- | -------------------- | --------------------- | ----------------------- | --------- |
| **hoverable** | 是否在悬停时增加阴影 | `boolean`             | -                       | `false`   |
| **shadow**    | 是否总是显示阴影     | `boolean`             | -                       | `false`   |
| **type**      | 卡片的类型           | [CardType](#cardtype) | -                       | `default` |
| **width**     | CSS 宽度属性         | `string`              | -                       | `100%`    |
| ...           | 原生属性             | `HTMLAttributes`      | `'id', className', ...` | -         |

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

| 属性 | 描述     | 类型             | 推荐值                  | 默认 |
| ---- | -------- | ---------------- | ----------------------- | ---- |
| ...  | 原生属性 | `HTMLAttributes` | `'id', className', ...` | -    |

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

| 属性                  | 描述                     | 类型             | 推荐值                  | 默认    |
| --------------------- | ------------------------ | ---------------- | ----------------------- | ------- |
| **disableAutoMargin** | 取消自动设置的 Margin 值 | `boolean`        | -                       | `false` |
| ...                   | 原生属性                 | `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>
