Skip to content

Commit 976167e

Browse files
wangdicoderwangdicoder
committed
feat: update card tab
1 parent d33780e commit 976167e

10 files changed

Lines changed: 2783 additions & 1304 deletions

File tree

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

Lines changed: 0 additions & 1016 deletions
This file was deleted.

‎apps/docs/src/containers/theme-studio/preview-components/cards-preview.tsx‎

Lines changed: 633 additions & 0 deletions
Large diffs are not rendered by default.

‎apps/docs/src/containers/theme-studio/preview-components/dashboard-preview.tsx‎

Lines changed: 922 additions & 0 deletions
Large diffs are not rendered by default.

‎apps/docs/src/containers/theme-studio/preview-components/index.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import { Flex } from '@tiny-design/react';
3+
import type { ThemeEditorFields, ThemeEditorSection, ThemePreviewTemplate } from '../types';
4+
import { CardsPreview } from './cards-preview';
5+
import { DashboardPreview } from './dashboard-preview';
6+
import { MailPreview } from './mail-preview';
7+
import { PricingPreview } from './pricing-preview';
8+
9+
export function renderPreview(
10+
template: ThemePreviewTemplate,
11+
_fields: ThemeEditorFields,
12+
_section: ThemeEditorSection
13+
): React.ReactElement {
14+
const content =
15+
template === 'dashboard' ? (
16+
<DashboardPreview />
17+
) : template === 'mail' ? (
18+
<MailPreview />
19+
) : template === 'pricing' ? (
20+
<PricingPreview />
21+
) : (
22+
<CardsPreview />
23+
);
24+
25+
return (
26+
<Flex vertical className="theme-studio__preview-stack">
27+
{content}
28+
</Flex>
29+
);
30+
}

‎apps/docs/src/containers/theme-studio/preview-components/mail-preview.tsx‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import React from 'react';
2+
import { Avatar, Button, Card, Flex, Grid, Heading, Input, Tag, Text, Textarea } from '@tiny-design/react';
3+
4+
export function MailPreview(): React.ReactElement {
5+
return (
6+
<Grid className="theme-studio__mail-shell">
7+
<Card className="theme-studio__mail-sidebar">
8+
<Card.Content>
9+
<Flex vertical className="theme-studio__mail-sidebar-head">
10+
<Flex vertical>
11+
<Text className="theme-studio__eyebrow">Mailbox</Text>
12+
<Heading level={4}>Studio Mail</Heading>
13+
</Flex>
14+
<Button variant="solid" color="primary" style={{ width: '100%' }}>
15+
Compose
16+
</Button>
17+
</Flex>
18+
19+
<Flex vertical className="theme-studio__mail-folder-list">
20+
{[
21+
['Inbox', '128'],
22+
['Drafts', '9'],
23+
['Sent', '24'],
24+
['Junk', '3'],
25+
['Trash', '0'],
26+
].map(([item, count], index) => (
27+
<Button
28+
key={item}
29+
className={`theme-studio__mail-nav-item${index === 0 ? ' theme-studio__mail-nav-item_active' : ''}`}
30+
variant={index === 0 ? 'solid' : 'ghost'}
31+
color="primary">
32+
<span>{item}</span>
33+
<small>{count}</small>
34+
</Button>
35+
))}
36+
</Flex>
37+
38+
<Flex vertical className="theme-studio__mail-labels">
39+
<Text strong>Labels</Text>
40+
<Flex gap="sm" wrap>
41+
<Tag color="info">Design</Tag>
42+
<Tag color="success">Work</Tag>
43+
<Tag color="warning">Personal</Tag>
44+
</Flex>
45+
</Flex>
46+
</Card.Content>
47+
</Card>
48+
49+
<Card className="theme-studio__mail-panel">
50+
<Card.Content>
51+
<Flex className="theme-studio__mail-panel-head">
52+
<Input placeholder="Search mail" />
53+
<Button>Filter</Button>
54+
</Flex>
55+
<Flex className="theme-studio__mail-toolbar">
56+
<Tag color="info">All mail</Tag>
57+
<Tag>Unread</Tag>
58+
<Tag>Assigned</Tag>
59+
</Flex>
60+
61+
<Flex vertical className="theme-studio__mail-thread-list">
62+
{[
63+
['Sofia Davis', 'New message', 'Hi, how can I help you today?', '12m', true],
64+
['Jackson Lee', 'Billing issue', 'I cannot update my card.', '1h', false],
65+
[
66+
'Olivia Martin',
67+
'Access request',
68+
'Can you grant me editor permissions?',
69+
'3h',
70+
false,
71+
],
72+
[
73+
'William Kim',
74+
'Design review',
75+
'Please review the new dashboard polish.',
76+
'Yesterday',
77+
false,
78+
],
79+
].map(([sender, subject, preview, time, unread], index) => (
80+
<Card
81+
key={sender}
82+
className={`theme-studio__mail-item${index === 0 ? ' theme-studio__mail-item_active' : ''}`}
83+
active={index === 0}
84+
hoverable>
85+
<Card.Content>
86+
<div className="theme-studio__mail-item-head">
87+
<strong>{sender}</strong>
88+
<span>{time}</span>
89+
</div>
90+
<span className="theme-studio__mail-item-subject">
91+
{subject}
92+
{unread ? <i className="theme-studio__mail-item-dot" /> : null}
93+
</span>
94+
<small>{preview}</small>
95+
</Card.Content>
96+
</Card>
97+
))}
98+
</Flex>
99+
</Card.Content>
100+
</Card>
101+
102+
<Card className="theme-studio__mail-detail">
103+
<Card.Content>
104+
<Flex className="theme-studio__mail-message-head">
105+
<Flex align="center" className="theme-studio__mail-message-meta">
106+
<Avatar>S</Avatar>
107+
<div>
108+
<Text strong>Re: New message</Text>
109+
<Text type="secondary">support@tiny.design</Text>
110+
</div>
111+
</Flex>
112+
<Flex className="theme-studio__mail-message-actions">
113+
<Tag color="info">Unread</Tag>
114+
<Button variant="outline" color="primary">
115+
Archive
116+
</Button>
117+
</Flex>
118+
</Flex>
119+
120+
<Flex vertical className="theme-studio__chat-thread">
121+
<Card
122+
bordered={false}
123+
className="theme-studio__chat-bubble theme-studio__chat-bubble_in">
124+
<Card.Content>Hi, how can I help you today?</Card.Content>
125+
</Card>
126+
<Card
127+
bordered={false}
128+
className="theme-studio__chat-bubble theme-studio__chat-bubble_out">
129+
<Card.Content>Hey, I&apos;m having trouble with my account.</Card.Content>
130+
</Card>
131+
<Card
132+
bordered={false}
133+
className="theme-studio__chat-bubble theme-studio__chat-bubble_in">
134+
<Card.Content>What seems to be the problem?</Card.Content>
135+
</Card>
136+
<Card
137+
bordered={false}
138+
className="theme-studio__chat-bubble theme-studio__chat-bubble_out">
139+
<Card.Content>I can&apos;t log in after resetting my password.</Card.Content>
140+
</Card>
141+
</Flex>
142+
143+
<Textarea rows={5} resizable={false} placeholder="Reply Sofia Davis..." />
144+
<Flex className="theme-studio__mail-compose">
145+
<Button>Save Draft</Button>
146+
<Button variant="solid" color="primary">
147+
Send
148+
</Button>
149+
</Flex>
150+
</Card.Content>
151+
</Card>
152+
</Grid>
153+
);
154+
}

‎apps/docs/src/containers/theme-studio/preview-components/pricing-preview.tsx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import React from 'react';
2+
import { Button, Card, Flex, Grid, Heading, Paragraph, Progress, Segmented, Tag, Text } from '@tiny-design/react';
3+
4+
export function PricingPreview(): React.ReactElement {
5+
return (
6+
<Flex vertical className="theme-studio__preview-stack">
7+
<Flex justify="space-between" align="flex-start" className="theme-studio__pricing-hero">
8+
<Flex vertical>
9+
<Text className="theme-studio__eyebrow">Pricing</Text>
10+
<Heading level={2}>Simple pricing for modern teams</Heading>
11+
<Paragraph>
12+
Choose a plan that scales from solo work to multi-product organizations.
13+
</Paragraph>
14+
<Flex className="theme-studio__pill-row">
15+
<Tag color="success">No setup fee</Tag>
16+
<Tag>Cancel anytime</Tag>
17+
</Flex>
18+
</Flex>
19+
<Segmented
20+
options={[
21+
{ label: 'Monthly', value: 'monthly' },
22+
{ label: 'Yearly', value: 'yearly' },
23+
]}
24+
value="monthly"
25+
/>
26+
</Flex>
27+
28+
<Grid className="theme-studio__pricing-grid" minColumnWidth={240} gap="sm">
29+
{[
30+
{
31+
name: 'Starter',
32+
price: '$29',
33+
description: 'Perfect for small businesses.',
34+
features: ['1 workspace', 'Basic analytics', 'Community support'],
35+
},
36+
{
37+
name: 'Pro',
38+
price: '$89',
39+
description: 'More features and storage.',
40+
featured: true,
41+
features: ['5 workspaces', 'Advanced analytics', 'Priority support'],
42+
},
43+
{
44+
name: 'Scale',
45+
price: '$199',
46+
description: 'For larger teams and advanced reporting.',
47+
features: ['Unlimited workspaces', 'SSO + audit log', 'Dedicated onboarding'],
48+
},
49+
].map((plan) => (
50+
<Card
51+
key={plan.name}
52+
className={`theme-studio__pricing-card${plan.featured ? ' theme-studio__pricing-card_featured' : ''}`}>
53+
<Card.Content>
54+
<Flex align="center" className="theme-studio__pricing-card-head">
55+
{plan.featured ? <Tag color="success">Popular</Tag> : null}
56+
<Text strong>{plan.name}</Text>
57+
</Flex>
58+
<Flex vertical className="theme-studio__pricing-price">
59+
<Heading level={2}>{plan.price}</Heading>
60+
<Text type="secondary">Per workspace / month</Text>
61+
</Flex>
62+
<Paragraph>{plan.description}</Paragraph>
63+
<Flex vertical className="theme-studio__pricing-feature-list">
64+
{plan.features.map((feature) => (
65+
<Text key={feature}>{feature}</Text>
66+
))}
67+
</Flex>
68+
<Flex className="theme-studio__pricing-card-footer">
69+
<Button variant="solid" color={plan.featured ? 'primary' : 'default'}>
70+
{plan.featured ? 'Upgrade plan' : 'Choose plan'}
71+
</Button>
72+
</Flex>
73+
</Card.Content>
74+
</Card>
75+
))}
76+
</Grid>
77+
78+
<Grid className="theme-studio__preview-grid" minColumnWidth={280} gap="sm">
79+
<Card title="Frequently Asked Questions" className="theme-studio__preview-card">
80+
<Card.Content>
81+
<Flex vertical className="theme-studio__faq-list">
82+
<Flex vertical className="theme-studio__faq-item">
83+
<Text strong>Can I cancel anytime?</Text>
84+
<Text type="secondary">Yes. Plans can be changed or canceled without lock-in.</Text>
85+
</Flex>
86+
<Flex vertical className="theme-studio__faq-item">
87+
<Text strong>Do you offer team migration?</Text>
88+
<Text type="secondary">Pro and Scale include assisted import and onboarding.</Text>
89+
</Flex>
90+
</Flex>
91+
</Card.Content>
92+
</Card>
93+
<Card title="Usage Snapshot" className="theme-studio__preview-card">
94+
<Card.Content>
95+
<Flex vertical className="theme-studio__settings-list">
96+
<Flex vertical>
97+
<Text strong>Seats</Text>
98+
<Progress.Bar percent={68} />
99+
</Flex>
100+
<Flex vertical>
101+
<Text strong>Storage</Text>
102+
<Progress.Bar percent={42} />
103+
</Flex>
104+
</Flex>
105+
</Card.Content>
106+
</Card>
107+
</Grid>
108+
</Flex>
109+
);
110+
}

0 commit comments

Comments
 (0)