Skip to content

Commit cefd857

Browse files
wangdicoderwangdicoder
committed
fix: live previewer theme issue
1 parent 42dc867 commit cefd857

9 files changed

Lines changed: 332 additions & 82 deletions

File tree

‎apps/docs/src/containers/theme-editor/components/preview-panel.tsx‎

Lines changed: 141 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,62 @@
11
import React from 'react';
22
import {
33
Alert,
4+
Avatar,
45
Badge,
6+
Breadcrumb,
57
Button,
68
Card,
79
Checkbox,
10+
Collapse,
811
Divider,
12+
Dropdown,
913
Flex,
1014
Input,
1115
InputNumber,
16+
Link,
17+
Menu,
1218
Pagination,
19+
Popover,
1320
Progress,
1421
Radio,
22+
Rate,
23+
Segmented,
1524
Select,
25+
Skeleton,
1626
Slider,
1727
Space,
28+
Statistic,
1829
Steps,
1930
Switch,
31+
Table,
2032
Tabs,
2133
Tag,
34+
Textarea,
35+
Timeline,
36+
Tooltip,
37+
Typography,
2238
} from '@tiny-design/react';
2339

40+
const tableColumns = [
41+
{ title: 'Name', dataIndex: 'name', key: 'name' },
42+
{ title: 'Age', dataIndex: 'age', key: 'age' },
43+
{ title: 'Role', dataIndex: 'role', key: 'role' },
44+
];
45+
46+
const tableData = [
47+
{ key: '1', name: 'Alice', age: 28, role: 'Designer' },
48+
{ key: '2', name: 'Bob', age: 32, role: 'Developer' },
49+
{ key: '3', name: 'Carol', age: 25, role: 'Manager' },
50+
];
51+
52+
const dropdownMenu = (
53+
<Menu>
54+
<Menu.Item index="1">Action 1</Menu.Item>
55+
<Menu.Item index="2">Action 2</Menu.Item>
56+
<Menu.Item index="3">Action 3</Menu.Item>
57+
</Menu>
58+
);
59+
2460
export const PreviewPanel = (): React.ReactElement => {
2561
return (
2662
<div className="theme-editor__preview">
@@ -29,7 +65,7 @@ export const PreviewPanel = (): React.ReactElement => {
2965
{/* Buttons */}
3066
<section className="theme-editor__preview-section">
3167
<h4>Buttons</h4>
32-
<Space wrap>
68+
<Flex gap="sm" wrap="wrap">
3369
<Button btnType="primary">Primary</Button>
3470
<Button>Default</Button>
3571
<Button btnType="outline">Outline</Button>
@@ -40,60 +76,68 @@ export const PreviewPanel = (): React.ReactElement => {
4076
Loading
4177
</Button>
4278
<Button disabled>Disabled</Button>
43-
</Space>
44-
<Space style={{ marginTop: 8 }}>
79+
</Flex>
80+
<Flex gap="sm" align="center" style={{ marginTop: 8 }}>
4581
<Button size="sm" btnType="primary">Small</Button>
4682
<Button size="md" btnType="primary">Medium</Button>
4783
<Button size="lg" btnType="primary">Large</Button>
48-
</Space>
84+
<Dropdown overlay={dropdownMenu}>
85+
<Button btnType="outline">Dropdown</Button>
86+
</Dropdown>
87+
</Flex>
4988
</section>
5089

5190
<Divider />
5291

53-
{/* Form Inputs */}
92+
{/* Form Controls */}
5493
<section className="theme-editor__preview-section">
5594
<h4>Form Controls</h4>
56-
<Space direction="vertical" style={{ width: '100%' }}>
57-
<Input placeholder="Input text..." />
58-
<Space>
59-
<InputNumber defaultValue={42} />
60-
<Select defaultValue="option1" style={{ width: 160 }}>
61-
<Select.Option value="option1">Option 1</Select.Option>
62-
<Select.Option value="option2">Option 2</Select.Option>
63-
<Select.Option value="option3">Option 3</Select.Option>
64-
</Select>
65-
</Space>
66-
<Space>
67-
<Checkbox defaultChecked>Checkbox</Checkbox>
68-
<Radio.Group defaultValue="a">
69-
<Radio value="a">Radio A</Radio>
70-
<Radio value="b">Radio B</Radio>
71-
</Radio.Group>
72-
<Switch defaultChecked />
73-
</Space>
74-
<Slider defaultValue={40} />
75-
</Space>
95+
<Flex gap="sm" wrap="wrap">
96+
<Input placeholder="Input text..." style={{ width: 200 }} />
97+
<InputNumber defaultValue={42} style={{ width: 120 }} />
98+
<Select defaultValue="option1" style={{ width: 160 }}>
99+
<Select.Option value="option1">Option 1</Select.Option>
100+
<Select.Option value="option2">Option 2</Select.Option>
101+
<Select.Option value="option3">Option 3</Select.Option>
102+
</Select>
103+
</Flex>
104+
<Flex gap="sm" align="center" style={{ marginTop: 12 }}>
105+
<Checkbox defaultChecked>Checkbox</Checkbox>
106+
<Radio.Group defaultValue="a">
107+
<Radio value="a">Radio A</Radio>
108+
<Radio value="b">Radio B</Radio>
109+
</Radio.Group>
110+
<Switch defaultChecked />
111+
<Rate defaultValue={3} />
112+
</Flex>
113+
<Slider defaultValue={40} style={{ marginTop: 12 }} />
114+
<Textarea rows={2} defaultValue="" style={{ marginTop: 12 }} />
76115
</section>
77116

78117
<Divider />
79118

80119
{/* Data Display */}
81120
<section className="theme-editor__preview-section">
82121
<h4>Data Display</h4>
83-
<Card title="Card Title" style={{ marginBottom: 16 }}>
122+
<Flex gap="md" wrap="wrap" style={{ marginBottom: 16 }}>
123+
<Statistic title="Users" value={1128} />
124+
<Statistic title="Revenue" value={9280} prefix="$" />
125+
<Statistic title="Growth" value={12.5} suffix="%" precision={1} />
126+
</Flex>
127+
<Table columns={tableColumns} dataSource={tableData} pagination={false} bordered />
128+
<Card title="Card Title" style={{ marginTop: 16 }}>
84129
<p>Card content with some text to show how typography looks in a card component.</p>
85130
</Card>
86-
<Flex gap="sm" wrap="wrap">
131+
<Flex gap="sm" wrap="wrap" style={{ marginTop: 16 }}>
87132
<Tag>Default</Tag>
88-
<Tag color="primary">Primary</Tag>
89133
<Tag color="success">Success</Tag>
90134
<Tag color="warning">Warning</Tag>
91135
<Tag color="danger">Danger</Tag>
92136
<Tag color="blue">Blue</Tag>
93137
<Tag color="green">Green</Tag>
94138
<Tag color="orange">Orange</Tag>
95139
</Flex>
96-
<Space style={{ marginTop: 12 }}>
140+
<Flex gap="sm" align="center" style={{ marginTop: 12 }}>
97141
<Badge count={5}>
98142
<div
99143
style={{
@@ -114,12 +158,45 @@ export const PreviewPanel = (): React.ReactElement => {
114158
}}
115159
/>
116160
</Badge>
117-
</Space>
161+
<Avatar size={42}>A</Avatar>
162+
<Avatar size={42} shape="square">B</Avatar>
163+
<Avatar size={42} presence="online">C</Avatar>
164+
</Flex>
165+
<Flex gap="lg" style={{ marginTop: 16 }}>
166+
<Progress.Circle percent={75} width={80} />
167+
<Progress.Circle percent={50} width={80} strokeColor="var(--ty-color-success)" />
168+
<Progress.Circle percent={90} width={80} strokeColor="var(--ty-color-warning)" />
169+
</Flex>
118170
<Progress.Bar percent={65} style={{ marginTop: 12 }} />
119171
</section>
120172

121173
<Divider />
122174

175+
{/* Typography & Overlay */}
176+
<section className="theme-editor__preview-section">
177+
<h4>Typography & Overlay</h4>
178+
<Typography>
179+
<Typography.Heading level={4}>Heading</Typography.Heading>
180+
<Typography.Paragraph>
181+
This is a paragraph with <Typography.Text strong>bold</Typography.Text>,{' '}
182+
<Typography.Text italic>italic</Typography.Text>,{' '}
183+
<Typography.Text code>code</Typography.Text>, and{' '}
184+
<Typography.Text mark>marked</Typography.Text> text.{' '}
185+
<Link href="#">Learn more</Link>
186+
</Typography.Paragraph>
187+
</Typography>
188+
<Flex gap="sm" style={{ marginTop: 12 }}>
189+
<Tooltip title="Tooltip text">
190+
<Button>Tooltip</Button>
191+
</Tooltip>
192+
<Popover title="Popover Title" content="Popover content goes here.">
193+
<Button>Popover</Button>
194+
</Popover>
195+
</Flex>
196+
</section>
197+
198+
<Divider />
199+
123200
{/* Feedback */}
124201
<section className="theme-editor__preview-section">
125202
<h4>Feedback</h4>
@@ -129,14 +206,24 @@ export const PreviewPanel = (): React.ReactElement => {
129206
<Alert type="warning" title="Warning alert message" />
130207
<Alert type="error" title="Error alert message" />
131208
</Space>
209+
<Skeleton active style={{ marginTop: 16 }} />
132210
</section>
133211

134212
<Divider />
135213

136214
{/* Navigation */}
137215
<section className="theme-editor__preview-section">
138216
<h4>Navigation</h4>
139-
<Tabs defaultActiveKey="1">
217+
<Breadcrumb>
218+
<Breadcrumb.Item>Home</Breadcrumb.Item>
219+
<Breadcrumb.Item>Theme</Breadcrumb.Item>
220+
<Breadcrumb.Item>Editor</Breadcrumb.Item>
221+
</Breadcrumb>
222+
<Segmented
223+
options={['Daily', 'Weekly', 'Monthly', 'Yearly']}
224+
style={{ marginTop: 12 }}
225+
/>
226+
<Tabs defaultActiveKey="1" style={{ marginTop: 12 }}>
140227
<Tabs.Panel tab="Tab 1" tabKey="1">
141228
Tab content 1
142229
</Tabs.Panel>
@@ -154,6 +241,29 @@ export const PreviewPanel = (): React.ReactElement => {
154241
</Steps>
155242
<Pagination total={100} defaultCurrent={1} style={{ marginTop: 16 }} />
156243
</section>
244+
245+
<Divider />
246+
247+
{/* Expandable */}
248+
<section className="theme-editor__preview-section">
249+
<h4>Expandable & Timeline</h4>
250+
<Collapse defaultActiveKey={['1']}>
251+
<Collapse.Panel itemKey="1" header="Panel 1">
252+
Content for the first collapsible panel.
253+
</Collapse.Panel>
254+
<Collapse.Panel itemKey="2" header="Panel 2">
255+
Content for the second collapsible panel.
256+
</Collapse.Panel>
257+
<Collapse.Panel itemKey="3" header="Panel 3" disabled>
258+
This panel is disabled.
259+
</Collapse.Panel>
260+
</Collapse>
261+
<Timeline style={{ marginTop: 16 }}>
262+
<Timeline.Item>Design review completed</Timeline.Item>
263+
<Timeline.Item>Development in progress</Timeline.Item>
264+
<Timeline.Item>Testing pending</Timeline.Item>
265+
</Timeline>
266+
</section>
157267
</div>
158268
);
159269
};

0 commit comments

Comments
 (0)