#Card 卡片

import { Card } from '@ifhover/leaf-ui';

export function CardBasic() {
  return <Card title="项目概览">整理项目资料，让团队围绕同一份计划协作。</Card>;
}

import { Card, Space } from '@ifhover/leaf-ui';

export function CardSizes() {
  const items = [
    { key: 'overview', label: '概览', children: '整理项目资料，让设计与开发围绕同一份计划协作。' },
    {
      key: 'activity',
      label: '最近动态',
      children: '今天更新了组件规范，并邀请两位成员加入项目。',
    },
  ];
  return (
    <Space direction="vertical" align="stretch" size="lg">
      <Card title="小尺寸" size="sm" tabs={{ items }} />
      <Card title="默认尺寸" tabs={{ items }} />
      <Card title="大尺寸" size="lg" tabs={{ items }} />
    </Space>
  );
}

import { Button, Card, Flex, Space, Tag } from '@ifhover/leaf-ui';

export function CardSections() {
  
  return (
    <Space direction="vertical" align="stretch" size="lg">
      <Card
        title={'项目概览'}
        description={'默认通过留白组织内容'}
        extra={<Tag>{'进行中'}</Tag>}
      >
        {'标题、说明和正文自然分组。'}
      </Card>
      <Card
        divided
        title={'内容分区'}
        footer={
          <Flex justify="end" gap="sm" wrap>
            <Button variant="outline">{'取消'}</Button>
            <Button>{'确认'}</Button>
          </Flex>
        }
      >
        {'设置 divided 后，标题、正文和底部操作使用分隔线划分。'}
      </Card>
    </Space>
  );
}

import { Button, Card, Descriptions, Space } from '@ifhover/leaf-ui';

export function CardTabs() {
  return (
    <Card
      extra={<Button variant="link">查看项目</Button>}
      tabs={{
        'aria-label': '项目概览',
        items: [
          {
            key: 'overview',
            label: '概览',
            children: (
              <Space direction="vertical" align="stretch" size="md">
                <span>让设计与开发围绕同一份计划协作。</span>
                <Descriptions
                  columns={2}
                  items={[
                    { key: 'owner', label: '负责人', children: '林若' },
                    { key: 'members', label: '团队成员', children: '8 人' },
                  ]}
                />
              </Space>
            ),
          },
          {
            key: 'activity',
            label: '最近动态',
            children: '今天更新了组件规范，并邀请两位成员加入项目。',
          },
        ],
      }}
    />
  );
}

import { Button, Card, Descriptions, Flex, Form, FormField, Input, Tag } from '@ifhover/leaf-ui';

import { useId, useState } from 'react';

export function CardTabsWithTitle() {
  const [activeKey, setActiveKey] = useState('settings');
  const [saved, setSaved] = useState(false);
  const formId = useId();
  return (
    <Card
      divided
      title="项目设置"
      description="管理项目资料与团队成员。"
      extra={<Tag>{saved ? '已保存' : '草稿'}</Tag>}
      tabs={{
        activeKey,
        onChange: setActiveKey,
        items: [
          {
            key: 'settings',
            label: '基本信息',
            children: (
              <Form
                id={formId}
                layout="vertical"
                onChange={() => setSaved(false)}
                onSubmit={(event) => {
                  event.preventDefault();
                  setSaved(true);
                }}
              >
                <FormField label="项目名称">
                  <Input name="name" defaultValue="Leaf 设计系统" required />
                </FormField>
                <FormField label="联系邮箱">
                  <Input name="email" type="email" defaultValue="team@example.com" required />
                </FormField>
              </Form>
            ),
          },
          {
            key: 'members',
            label: '团队成员',
            children: (
              <Descriptions
                columns={1}
                items={[
                  { key: 'owner', label: '项目负责人', children: '林若' },
                  { key: 'designer', label: '设计师', children: '陈安' },
                ]}
              />
            ),
          },
          { key: 'billing', label: '账单', disabled: true, children: null },
        ],
      }}
      footer={
        <Flex align="center" gap="sm" justify="end">
          <Button type="submit" form={formId} disabled={activeKey !== 'settings'}>
            保存修改
          </Button>
        </Flex>
      }
    />
  );
}