Skip to content

Commit b01962b

Browse files
FrontendlandFrontendland
committed
✨ Add example components
1 parent e6b8beb commit b01962b

File tree

4 files changed

+292
-13
lines changed

4 files changed

+292
-13
lines changed

‎src/components/Tabs/tabs.module.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
@include border-radius(md);
88
@include spacing(p-xs);
99
@include size(wmax-content);
10+
@include border(0);
1011

1112
button {
1213
@include transition();
@@ -46,6 +47,10 @@
4647
&.outline .items button {
4748
@include border(bottom, 0);
4849
}
50+
51+
&:not(.outline) .items {
52+
@include border(0);
53+
}
4954

5055
.items {
5156
@include layout(column, xs);

‎src/pages/index.astro

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
import Layout from '@static/Layout.astro'
3+
import Examples from '@static/Examples.astro'
34
import CardWrapper from '@static/CardWrapper.astro'
45
56
import Accordion from '@components/Accordion/Accordion.astro'
@@ -66,7 +67,9 @@ const tabItems = [{
6667
</div>
6768

6869
<ThemeSwitcher themes={themes} className="switcher" />
70+
<Examples />
6971

72+
<h2 class="my">Components</h2>
7073
<div class="grid md-2 lg-3">
7174
<CardWrapper title="Accordion" href="/accordion">
7275
<Accordion items={accordionItems} />
@@ -174,6 +177,9 @@ const tabItems = [{
174177
</Layout>
175178

176179
<style is:global lang="scss">
180+
h2.my {
181+
margin-top: 100px;
182+
}
177183

178184
.a {
179185
background: #B545ED;
@@ -182,11 +188,11 @@ const tabItems = [{
182188
-webkit-background-clip: text;
183189
-webkit-text-fill-color: transparent;
184190
}
185-
191+
186192
.s {
187193
color: #FF3E00;
188194
}
189-
195+
190196
.r {
191197
color: #61DAFB;
192198
}
@@ -197,17 +203,13 @@ const tabItems = [{
197203
justify-content: center;
198204
gap: 10px;
199205
}
200-
201-
.grid {
202-
margin-top: 100px;
203-
204-
.card-wrapper > div {
205-
pointer-events: none;
206-
display: flex;
207-
align-items: center;
208-
justify-content: center;
209-
gap: 10px;
210-
}
206+
207+
.card-wrapper > div {
208+
pointer-events: none;
209+
display: flex;
210+
align-items: center;
211+
justify-content: center;
212+
gap: 10px;
211213
}
212214

213215
.menu-example {

‎src/static/Examples.astro

Lines changed: 268 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
---
2+
import Card from '@components/Card/Card.astro'
3+
import Input from '@components/Input/Input.astro'
4+
import Badge from '@components/Badge/Badge.astro'
5+
import Button from '@components/Button/Button.astro'
6+
import Checkbox from '@components/Checkbox/Checkbox.astro'
7+
import Radio from '@components/Radio/Radio.astro'
8+
import Switch from '@components/Switch/Switch.astro'
9+
import Avatar from '@components/Avatar/Avatar.astro'
10+
import Tabs from '@components/Tabs/Tabs.astro'
11+
import Table from '@components/Table/Table.astro'
12+
import Timeline from '@components/Timeline/Timeline.astro'
13+
import Progress from '@components/Progress/Progress.astro'
14+
import Rating from '@components/Rating/Rating.astro'
15+
import Spinner from '@components/Spinner/Spinner.astro'
16+
import TimelineItem from '@components/TimelineItem/TimelineItem.astro'
17+
18+
import { avatarGroup } from '@data'
19+
20+
const tabItems = [{
21+
label: 'Profile',
22+
value: 'profile',
23+
active: true
24+
}, {
25+
label: 'Contact',
26+
value: 'contact'
27+
}]
28+
29+
const radioItems = [
30+
{ label: 'All messages', value: '1' },
31+
{ label: 'Direct messages only', value: '2', selected: true },
32+
{ label: 'No notifications', value: '3'},
33+
]
34+
35+
const tasks = [
36+
{ theme: null, label: 'IP', ticket: 'W4567 - Home redesign' },
37+
{ theme: 'alert', label: 'P1', ticket: 'W2345 - Payment gateway warnings' },
38+
{ theme: 'warning', label: 'P3', ticket: 'W6789 - Investigate user auth issues' },
39+
{ theme: 'info', label: 'TODO', ticket: 'W1357 - Mobile redesign' }
40+
]
41+
---
42+
43+
<div class="examples flex">
44+
<div class="example-column flex column">
45+
<Card title="Sign up">
46+
<div class="flex column">
47+
<Input label="Email" placeholder="Enter your email" />
48+
<Input
49+
type="password"
50+
label="Password"
51+
placeholder="Enter your password"
52+
subText="Generate a unique password <a href='#'>here</a>"
53+
/>
54+
<div>
55+
<Button theme="success">Create an account</Button>
56+
<Button theme="secondary">Sign in</Button>
57+
</div>
58+
</div>
59+
</Card>
60+
<Card>
61+
<Timeline theme="fill">
62+
<TimelineItem title="2020">
63+
<strong>Founded</strong>
64+
<br />
65+
<span class="muted">
66+
Launched our mission to transform online shopping with a handpicked selection of goods and a commitment to unparalleled customer care.
67+
</span>
68+
</TimelineItem>
69+
<TimelineItem title="2021">
70+
<strong>Expanded Offerings</strong>
71+
<br />
72+
<span class="muted">
73+
Introduced over 500 unique, locally-sourced products, enriching our collection and supporting small businesses.
74+
</span>
75+
</TimelineItem>
76+
<TimelineItem title="2022">
77+
<strong>⭐ Achieved Milestone</strong>
78+
<br />
79+
<span class="muted">
80+
Proudly served 100,000 happy customers, marked by launching same-day delivery in major cities and exclusive membership perks.
81+
</span>
82+
</TimelineItem>
83+
</Timeline>
84+
</Card>
85+
</div>
86+
87+
<div class="example-column flex column">
88+
<Card title="Settings">
89+
<div class="flex column">
90+
<Checkbox
91+
label="Enable all notifications"
92+
subText="Enable or disable all of your notification with one click. Previous settings will be overwritten."
93+
/>
94+
<Switch label="Security emails" toggled={true} />
95+
<Switch label="Marketing emails" />
96+
<hr />
97+
<strong class="slack">Slack notifications</strong>
98+
<Radio
99+
items={radioItems}
100+
name="radio-example"
101+
/>
102+
</div>
103+
</Card>
104+
<Card title="SEO Overview">
105+
<span>Keep track of the SEO performance of your posts.</span>
106+
107+
<div class="my flex column md">
108+
<div>
109+
<div class="flex justify-between muted progress-label">
110+
<span>Underperforming</span>
111+
<span>50%</span>
112+
</div>
113+
<Progress value={50} color="var(--w-color-alert)" />
114+
</div>
115+
<div>
116+
<div class="flex justify-between muted progress-label">
117+
<span>OK</span>
118+
<span>30%</span>
119+
</div>
120+
<Progress value={30} color="var(--w-color-warning)" />
121+
</div>
122+
<div>
123+
<div class="flex justify-between muted progress-label">
124+
<span>SEO-friendly</span>
125+
<span>20%</span>
126+
</div>
127+
<Progress value={20} color="var(--w-color-success)" />
128+
</div>
129+
</div>
130+
</Card>
131+
</div>
132+
133+
<div class="example-column flex column">
134+
<Card>
135+
<Tabs items={tabItems} theme="boxed" even={true}>
136+
<div data-tab="profile" data-active="true">
137+
<div class="flex sm items-center">
138+
<Avatar
139+
img="/img/avatar2.png"
140+
size={50}
141+
/>
142+
<div class="flex column xs">
143+
<span>Emily</span>
144+
<span class="muted">QA Engineer</span>
145+
</div>
146+
</div>
147+
148+
<strong class="tasks">Tasks</strong>
149+
<hr />
150+
<div class="flex column xs">
151+
{tasks.map(task => (
152+
<div>
153+
<Badge theme={task.theme as any}>
154+
{task.label}
155+
</Badge>
156+
<a href="#" class="muted task">
157+
{task.ticket}
158+
</a>
159+
</div>
160+
))}
161+
</div>
162+
</div>
163+
<div data-tab="contact">
164+
<Table
165+
data={[
166+
['Phone', '+1 234 5678'],
167+
['Email', '<a href="#">emily@example.com</a>'],
168+
['Slack', '@emily09'],
169+
['Address', 'Mars, Pennsylvania']
170+
]}
171+
/>
172+
</div>
173+
</Tabs>
174+
</Card>
175+
176+
<Card>
177+
<div class="flex sm items-center">
178+
<Avatar
179+
img="/img/avatar0.png"
180+
size={50}
181+
/>
182+
<div class="flex column xs">
183+
<span>Marcus</span>
184+
<span class="muted" data-tooltip="In Art & Collectibles">
185+
Top rated seller
186+
</span>
187+
</div>
188+
</div>
189+
<hr />
190+
<Rating
191+
score={4.8}
192+
showText={true}
193+
reviewCount={123}
194+
reviewLink="#"
195+
reviewTarget="_blank"
196+
/>
197+
<div class="flex center sm loading">
198+
<Spinner />
199+
<span class="muted">
200+
Loading reviews...
201+
</span>
202+
</div>
203+
<hr />
204+
<div class="sellers">
205+
<strong>Explore other sellers</strong>
206+
<a href="#">
207+
<Avatar
208+
size={[30, 40, 50, 40, 30]}
209+
img={avatarGroup}
210+
/>
211+
</a>
212+
</div>
213+
</Card>
214+
</div>
215+
</div>
216+
217+
<style is:global lang="scss">
218+
@import '../scss/config.scss';
219+
220+
.examples {
221+
margin-top: 100px;
222+
overflow-x: scroll;
223+
scrollbar-width: none;
224+
}
225+
226+
.example-column {
227+
min-width: 370px;
228+
width: 370px;
229+
}
230+
231+
.slack {
232+
margin-top: -5px;
233+
}
234+
235+
.tasks {
236+
@include spacing(mt-sm);
237+
display: block;
238+
}
239+
240+
.task {
241+
@include typography(none);
242+
243+
&:hover {
244+
@include typography(primary);
245+
}
246+
}
247+
248+
.progress-label {
249+
@include spacing(mb-xs);
250+
}
251+
252+
.loading {
253+
@include spacing(mt-default);
254+
255+
svg {
256+
@include spacing(m0);
257+
}
258+
}
259+
260+
.sellers {
261+
@include typography(center);
262+
263+
strong {
264+
@include spacing(my-xs);
265+
display: block;
266+
}
267+
}
268+
</style>

‎src/static/Layout.astro

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,4 +133,8 @@ const externalLinks = [
133133
.mb {
134134
@include spacing(mb-default);
135135
}
136+
137+
.muted {
138+
@include typography(primary-20, md);
139+
}
136140
</style>

0 commit comments

Comments
 (0)