tiny-design/packages/react/src/divider/demo/ContentSection.tsx at a05368713fd0af8584bbcbc1079c2c99746d0b79 · wangdicoder/tiny-design · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import React from 'react';
import { Card, Divider, Tag, Text } from '@tiny-design/react';

const rowStyle: React.CSSProperties = {
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  gap: 12,
};

export default function ContentSectionDemo() {
  return (
    <Card
      style={{
        maxWidth: 520,
        borderRadius: 16,
        background:
          'linear-gradient(180deg, color-mix(in srgb, var(--ty-color-primary) 5%, white), white)',
      }}
    >
      <Card.Content>
        <div style={rowStyle}>
          <div>
            <Text strong>Release Checklist</Text>
            <div style={{ marginTop: 6 }}>
              <Text type="secondary">Prepare the final rollout for the next product update.</Text>
            </div>
          </div>
          <Tag color="info" variant="soft">v1.12</Tag>
        </div>

        <Divider titlePlacement="start" plain>
          QA Status
        </Divider>
        <div style={rowStyle}>
          <div>
            <Text>Visual review</Text>
            <div style={{ marginTop: 4 }}>
              <Text type="secondary">Tokens, spacing, and states confirmed.</Text>
            </div>
          </div>
          <Tag color="success" variant="soft">Passed</Tag>
        </div>

        <Divider titlePlacement="start" plain>
          Deployment
        </Divider>
        <div style={rowStyle}>
          <div>
            <Text>Production rollout</Text>
            <div style={{ marginTop: 4 }}>
              <Text type="secondary">Waiting for final approval from release owners.</Text>
            </div>
          </div>
          <Tag color="warning" variant="soft">Pending</Tag>
        </div>
      </Card.Content>
    </Card>
  );
}