Skip to content

Commit c338626

Browse files
FrontendlandFrontendland
committed
🗃️ Outsource mock data
1 parent a269841 commit c338626

File tree

8 files changed

+86
-105
lines changed

8 files changed

+86
-105
lines changed

‎src/data.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import infoIcon from './icons/info.svg?raw'
2+
import gitHubIcon from './icons/github.svg?raw'
3+
import successIcon from './icons/circle-check.svg?raw'
4+
5+
export const accordionItems = [{
6+
title: 'Do you offer support?',
7+
content: 'We provide 30 days of support.'
8+
}, {
9+
title: 'Can I request changes?',
10+
content: 'Yes!'
11+
}, {
12+
title: 'Are there any refunds?',
13+
content: 'Hopefully.'
14+
}]
15+
16+
export const avatarGroup = [
17+
"/img/avatar0.png",
18+
"/img/avatar1.png",
19+
"/img/avatar2.png",
20+
"/img/avatar3.png",
21+
"/img/avatar4.png"
22+
]
23+
24+
export const tabItems = [{
25+
label: 'Introduction',
26+
value: 'intro',
27+
active: true
28+
}, {
29+
label: 'Setup',
30+
value: 'setup'
31+
}, {
32+
label: 'Conclusion',
33+
value: 'conclusion'
34+
}]
35+
36+
export const tabsWithIcons = [
37+
{...tabItems[0], label: `${infoIcon} Introduction` },
38+
{...tabItems[1], label: `${gitHubIcon} Setup` },
39+
{...tabItems[2], label: `${successIcon} Conclusion`, disabled: true }
40+
]
41+
export const inactiveTabs = tabItems.map(item => ({...item, active: false}))
42+
export const disabledTabs = [
43+
{...tabItems[0]},
44+
{...tabItems[1]},
45+
{...tabItems[2], disabled: true }
46+
]
47+
48+
export const overflowTabs = Array(10).fill({
49+
label: '',
50+
value: 0,
51+
}).map((_, index) => ({
52+
label: `Tab ${index + 1}`,
53+
value: `tab-${index + 1}`
54+
}))

‎src/pages/accordion.astro

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,7 @@ import AstroAccordion from '@components/Accordion/Accordion.astro'
66
import SvelteAccordion from '@components/Accordion/Accordion.svelte'
77
import ReactAccordion from '@components/Accordion/Accordion.tsx'
88
9-
const accordionItems = [{
10-
title: 'Do you offer support?',
11-
content: 'We provide 30 days of support.'
12-
}, {
13-
title: 'Can I request customizations?',
14-
content: 'Yes!'
15-
}, {
16-
title: 'Are there any refunds?',
17-
content: 'Hopefully.'
18-
}]
9+
import { accordionItems } from '@data'
1910
---
2011

2112
<Layout>

‎src/pages/avatar.astro

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import AstroAvatar from '@components/Avatar/Avatar.astro'
66
import SvelteAvatar from '@components/Avatar/Avatar.svelte'
77
import ReactAvatar from '@components/Avatar/Avatar.tsx'
88
9+
import { avatarGroup } from '@data'
10+
911
const sections = [
1012
{
1113
title: 'Astro avatars',
@@ -20,14 +22,6 @@ const sections = [
2022
component: ReactAvatar
2123
}
2224
]
23-
24-
const group = [
25-
"/img/avatar0.png",
26-
"/img/avatar1.png",
27-
"/img/avatar2.png",
28-
"/img/avatar3.png",
29-
"/img/avatar4.png"
30-
]
3125
---
3226

3327
<Layout>
@@ -75,41 +69,41 @@ const group = [
7569
</ComponentWrapper>
7670

7771
<ComponentWrapper title="Avatar group">
78-
<section.component img={group} />
72+
<section.component img={avatarGroup} />
7973
</ComponentWrapper>
8074

8175
<ComponentWrapper title="Borderless avatars">
8276
<section.component
8377
borderless={true}
84-
img={group}
78+
img={avatarGroup}
8579
/>
8680
</ComponentWrapper>
8781

8882
<ComponentWrapper title="Avatars in reverse order">
8983
<section.component
9084
reverse={true}
91-
img={group}
85+
img={avatarGroup}
9286
/>
9387
</ComponentWrapper>
9488

9589
<ComponentWrapper title="Avatars with increasing sizes">
9690
<section.component
9791
size={[35, 40, 45, 50, 55]}
98-
img={group}
92+
img={avatarGroup}
9993
/>
10094
</ComponentWrapper>
10195

10296
<ComponentWrapper title="Avatars with decreasing sizes">
10397
<section.component
10498
size={[55, 50, 45, 40, 35]}
105-
img={group}
99+
img={avatarGroup}
106100
/>
107101
</ComponentWrapper>
108102

109103
<ComponentWrapper title="Avatars with varying sizes">
110104
<section.component
111105
size={[30, 40, 50, 40, 30]}
112-
img={group}
106+
img={avatarGroup}
113107
/>
114108
</ComponentWrapper>
115109
</div>

‎src/pages/index.astro

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import Tabs from '@components/Tabs/Tabs.astro'
1717
import infoIcon from '../icons/info.svg?raw'
1818
import gitHubIcon from '../icons/github.svg?raw'
1919
20+
import { accordionItems, avatarGroup } from '@data'
21+
2022
const tabItems = [{
2123
label: `${infoIcon} Intro`,
2224
value: 'intro',
@@ -54,32 +56,15 @@ const tabItems = [{
5456
</div>
5557
<div class="grid md-2 lg-3">
5658
<CardWrapper title="Accordion" href="/accordion">
57-
<Accordion
58-
items={[{
59-
title: 'Do you offer support?',
60-
content: 'We provide 30 days of support.'
61-
}, {
62-
title: 'Can I request changes?',
63-
content: 'Yes!'
64-
}, {
65-
title: 'Are there any refunds?',
66-
content: 'Hopefully.'
67-
}]}
68-
/>
59+
<Accordion items={accordionItems} />
6960
</CardWrapper>
7061
<CardWrapper title="Alert" href="/alert">
7162
<Alert title="💡 Note">You can create alert boxes.</Alert>
7263
</CardWrapper>
7364
<CardWrapper title="Avatar" href="/avatar">
7465
<Avatar
7566
size={[30, 40, 50, 40, 30]}
76-
img={[
77-
'/img/avatar0.png',
78-
'/img/avatar1.png',
79-
'/img/avatar2.png',
80-
'/img/avatar3.png',
81-
'/img/avatar4.png'
82-
]}
67+
img={avatarGroup}
8368
/>
8469
</CardWrapper>
8570
<CardWrapper title="Badge" href="/badge">

‎src/pages/tabs.astro

Lines changed: 15 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,14 @@ import infoIcon from '../icons/info.svg?raw'
1010
import gitHubIcon from '../icons/github.svg?raw'
1111
import successIcon from '../icons/circle-check.svg?raw'
1212
13+
import {
14+
tabItems,
15+
tabsWithIcons,
16+
inactiveTabs,
17+
disabledTabs,
18+
overflowTabs
19+
} from '@data'
20+
1321
const sections = [
1422
{
1523
title: 'Astro tabs',
@@ -26,61 +34,29 @@ const sections = [
2634
component: ReactTabs
2735
}
2836
]
29-
30-
const items = [{
31-
label: 'Introduction',
32-
value: 'intro',
33-
active: true
34-
}, {
35-
label: 'Setup',
36-
value: 'setup'
37-
}, {
38-
label: 'Conclusion',
39-
value: 'conclusion'
40-
}]
41-
42-
const tabsWithIcons = [
43-
{...items[0], label: `${infoIcon} Introduction` },
44-
{...items[1], label: `${gitHubIcon} Setup` },
45-
{...items[2], label: `${successIcon} Conclusion`, disabled: true }
46-
]
47-
const inactiveTabs = items.map(item => ({...item, active: false}))
48-
const disabledTabs = [
49-
{...items[0]},
50-
{...items[1]},
51-
{...items[2], disabled: true }
52-
]
53-
54-
const overflowTabs = Array(10).fill({
55-
label: '',
56-
value: 0,
57-
}).map((_, index) => ({
58-
label: `Tab ${index + 1}`,
59-
value: `tab-${index + 1}`
60-
}))
6137
---
6238

6339
<Layout>
6440
<h1>Tabs</h1>
6541
<div class="grid md-2 lg-3">
6642
<ComponentWrapper type="Astro">
67-
<AstroTabs items={items}>
43+
<AstroTabs items={tabItems}>
6844
<div data-tab="intro" data-active="true">Intro tab</div>
6945
<div data-tab="setup">Setup tab</div>
7046
<div data-tab="conclusion">Conclusion tab</div>
7147
</AstroTabs>
7248
</ComponentWrapper>
7349

7450
<ComponentWrapper type="Svelte">
75-
<SvelteTabs items={items} client:visible>
51+
<SvelteTabs items={tabItems} client:visible>
7652
<div data-tab="intro" data-active="true">Intro tab</div>
7753
<div data-tab="setup">Setup tab</div>
7854
<div data-tab="conclusion">Conclusion tab</div>
7955
</SvelteTabs>
8056
</ComponentWrapper>
8157

8258
<ComponentWrapper type="React">
83-
<ReactTabs items={items} client:visible>
59+
<ReactTabs items={tabItems} client:visible>
8460
<div data-tab="intro" data-active="true">Intro tab</div>
8561
<div data-tab="setup">Setup tab</div>
8662
<div data-tab="conclusion">Conclusion tab</div>
@@ -95,7 +71,7 @@ const overflowTabs = Array(10).fill({
9571
</Fragment>
9672
<div class="grid md-2">
9773
<ComponentWrapper title="Default">
98-
<section.component items={items}>
74+
<section.component items={tabItems}>
9975
<div data-tab="intro" data-active="true">Intro tab</div>
10076
<div data-tab="setup">Setup tab</div>
10177
<div data-tab="conclusion">Conclusion tab</div>
@@ -127,7 +103,7 @@ const overflowTabs = Array(10).fill({
127103
</ComponentWrapper>
128104

129105
<ComponentWrapper title="Boxed tabs">
130-
<section.component items={items} theme="boxed">
106+
<section.component items={tabItems} theme="boxed">
131107
<div data-tab="intro" data-active="true">Intro tab</div>
132108
<div data-tab="setup">Setup tab</div>
133109
<div data-tab="conclusion">Conclusion tab</div>
@@ -143,7 +119,7 @@ const overflowTabs = Array(10).fill({
143119
</ComponentWrapper>
144120

145121
<ComponentWrapper title="Outline tabs">
146-
<section.component items={items} theme="outline">
122+
<section.component items={tabItems} theme="outline">
147123
<div data-tab="intro" data-active="true">Intro tab</div>
148124
<div data-tab="setup">Setup tab</div>
149125
<div data-tab="conclusion">Conclusion tab</div>
@@ -159,7 +135,7 @@ const overflowTabs = Array(10).fill({
159135
</ComponentWrapper>
160136

161137
<ComponentWrapper title="Vertical tabs">
162-
<section.component items={items} vertical={true}>
138+
<section.component items={tabItems} vertical={true}>
163139
<div data-tab="intro" data-active="true">Intro tab</div>
164140
<div data-tab="setup">Setup tab</div>
165141
<div data-tab="conclusion">Conclusion tab</div>

‎src/playground/ReactPlayground.tsx

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,7 @@ import Radio from '@components/Radio/Radio.tsx'
99
import Switch from '@components/Switch/Switch.tsx'
1010
import Tabs from '@components/Tabs/Tabs.tsx'
1111

12-
const tabItems = [{
13-
label: 'Introduction',
14-
value: 'intro',
15-
active: true
16-
}, {
17-
label: 'Setup',
18-
value: 'setup'
19-
}, {
20-
label: 'Conclusion',
21-
value: 'conclusion'
22-
}]
12+
import { tabItems } from '@data'
2313

2414
const ReactPlayground = () => {
2515
return (

‎src/playground/SveltePlayground.svelte

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,7 @@
99
import Switch from '@components/Switch/Switch.svelte'
1010
import Tabs from '@components/Tabs/Tabs.svelte'
1111
12-
const tabItems = [{
13-
label: 'Introduction',
14-
value: 'intro',
15-
active: true
16-
}, {
17-
label: 'Setup',
18-
value: 'setup'
19-
}, {
20-
label: 'Conclusion',
21-
value: 'conclusion'
22-
}]
12+
import { tabItems } from '@data'
2313
</script>
2414

2515
<div class="grid md-2 lg-3">

‎tsconfig.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"paths": {
77
"@components/*": ["src/components/*"],
88
"@static/*": ["src/static/*"],
9-
"@playground/*": ["src/playground/*"]
9+
"@playground/*": ["src/playground/*"],
10+
"@data": ["src/data.js"]
1011
}
1112
}
1213
}

0 commit comments

Comments
 (0)