Skip to content

Commit a56fb4e

Browse files
FrontendlandFrontendland
committed
✨ Add Switch component for Astro
1 parent cdaf9ed commit a56fb4e

File tree

8 files changed

+249
-0
lines changed

8 files changed

+249
-0
lines changed

‎src/components/Switch/Switch.astro‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
import type { SwitchProps } from './switch'
3+
import './switch.scss'
4+
5+
interface Props extends SwitchProps {}
6+
7+
const {
8+
label,
9+
toggled,
10+
offColor,
11+
onColor,
12+
reverse,
13+
small,
14+
square,
15+
disabled,
16+
className
17+
} = Astro.props
18+
19+
const classes = [
20+
'w-switch',
21+
reverse && 'reverse',
22+
small && 'small',
23+
square && 'square',
24+
disabled && 'disabled',
25+
className
26+
]
27+
28+
const styles = [
29+
offColor && `--w-switch-off-color: ${offColor};`,
30+
onColor && `--w-switch-on-color: ${onColor};`
31+
].filter(Boolean).join(' ')
32+
---
33+
34+
<label class:list={classes} style={styles || null}>
35+
<input type="checkbox" checked={toggled} disabled={disabled} />
36+
<span class="toggle"></span>
37+
{label && <span class="label">{label}</span>}
38+
</label>

‎src/components/Switch/Switch.svelte‎

Whitespace-only changes.

‎src/components/Switch/Switch.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react'
2+
import type { SwitchProps } from './switch'
3+
import './switch.scss'
4+
5+
const Switch = ({
6+
7+
}: SwitchProps) => {
8+
9+
10+
return (
11+
<div>switch</div>
12+
)
13+
}
14+
15+
export default Switch

‎src/components/Switch/switch.scss‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
@import '../../scss/config.scss';
2+
3+
.w-switch {
4+
display: inline-flex;
5+
align-items: center;
6+
gap: 10px;
7+
cursor: pointer;
8+
9+
&.reverse {
10+
flex-direction: row-reverse;
11+
}
12+
13+
&.disabled .toggle {
14+
cursor: no-drop;
15+
background: #333;
16+
17+
&::before {
18+
background: #252525;
19+
}
20+
}
21+
22+
&.small {
23+
input:checked + span::before {
24+
transform: translateX(20px);
25+
}
26+
27+
.toggle {
28+
width: 40px;
29+
height: 20px;
30+
31+
&::before {
32+
height: 14px;
33+
width: 14px;
34+
}
35+
}
36+
37+
.label {
38+
font-size: 14px;
39+
}
40+
}
41+
42+
&.square .toggle {
43+
border-radius: 5px;
44+
45+
&::before {
46+
border-radius: 5px;
47+
}
48+
}
49+
50+
input {
51+
display: none;
52+
53+
&:checked + span {
54+
background-color: var(--w-switch-on-color);
55+
56+
&::before {
57+
transform: translateX(30px);
58+
}
59+
}
60+
}
61+
62+
.toggle {
63+
@include Transition(background);
64+
position: relative;
65+
width: 60px;
66+
height: 30px;
67+
background: var(--w-switch-off-color);
68+
border-radius: 30px;
69+
70+
&::before {
71+
content: "";
72+
position: absolute;
73+
height: 24px;
74+
width: 24px;
75+
left: 3px;
76+
bottom: 3px;
77+
background: #000;
78+
border-radius: 50%;
79+
transition: 0.3s;
80+
}
81+
}
82+
}
83+
84+

‎src/components/Switch/switch.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export type SwitchProps = {
2+
label?: string
3+
toggled?: boolean
4+
offColor?: string
5+
onColor?: string
6+
reverse?: boolean
7+
small?: boolean
8+
square?: boolean
9+
disabled?: boolean
10+
className?: string
11+
}

‎src/pages/index.astro‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Badge from '@components/Badge/Badge.astro'
99
import Button from '@components/Button/Button.astro'
1010
import Icon from '@components/Icon/Icon.astro'
1111
import Rating from '@components/Rating/Rating.astro'
12+
import Switch from '@components/Switch/Switch.astro'
1213
---
1314

1415
<Layout>
@@ -101,6 +102,10 @@ import Rating from '@components/Rating/Rating.astro'
101102
<CardWrapper title="Rating" href="/rating">
102103
<Rating score={4} />
103104
</CardWrapper>
105+
106+
<CardWrapper title="Switch" href="/switch">
107+
<Switch toggled={true} />
108+
</CardWrapper>
104109
</div>
105110
</Layout>
106111

‎src/pages/switch.astro‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
---
2+
import Layout from '@static/Layout.astro'
3+
import ComponentWrapper from '@static/ComponentWrapper.astro'
4+
5+
import AstroSwitch from '@components/Switch/Switch.astro'
6+
import SvelteSwitch from '@components/Switch/Switch.svelte'
7+
import ReactSwitch from '@components/Switch/Switch.tsx'
8+
9+
const sections = [
10+
{
11+
title: 'Astro ratings',
12+
component: AstroSwitch
13+
},
14+
{
15+
title: 'Svelte ratings',
16+
component: SvelteSwitch
17+
},
18+
{
19+
title: 'React ratings',
20+
component: ReactSwitch
21+
}
22+
]
23+
---
24+
25+
<Layout>
26+
<h1>Switch</h1>
27+
<div class="grid md-2 lg-3">
28+
<ComponentWrapper type="Astro">
29+
<AstroSwitch />
30+
</ComponentWrapper>
31+
32+
<ComponentWrapper type="Svelte">
33+
<SvelteSwitch color="#ee5253" />
34+
</ComponentWrapper>
35+
36+
<ComponentWrapper type="React">
37+
<ReactSwitch color="#48dbfb" />
38+
</ComponentWrapper>
39+
</div>
40+
41+
{sections.map(section => (
42+
<h1>{section.title}</h1>
43+
<div class="grid md-2 lg-3">
44+
<ComponentWrapper title="Default">
45+
<section.component />
46+
</ComponentWrapper>
47+
48+
<ComponentWrapper title="Toggled by default">
49+
<section.component toggled={true} />
50+
</ComponentWrapper>
51+
52+
<ComponentWrapper title="With custom colors">
53+
<section.component
54+
offColor="#ee5253"
55+
onColor="#1dd1a1"
56+
/>
57+
</ComponentWrapper>
58+
59+
<ComponentWrapper title="With label">
60+
<section.component label="Toggle me" />
61+
</ComponentWrapper>
62+
63+
<ComponentWrapper title="With label on left">
64+
<section.component label="Toggle me" reverse={true} />
65+
</ComponentWrapper>
66+
67+
<ComponentWrapper title="Square toggle">
68+
<section.component
69+
square={true}
70+
/>
71+
</ComponentWrapper>
72+
73+
<ComponentWrapper title="Small toggle">
74+
<section.component
75+
small={true}
76+
label="With label"
77+
/>
78+
</ComponentWrapper>
79+
80+
<ComponentWrapper title="Small square toggle">
81+
<section.component
82+
square={true}
83+
small={true}
84+
/>
85+
</ComponentWrapper>
86+
87+
<ComponentWrapper title="Disabled toggle">
88+
<section.component
89+
disabled={true}
90+
/>
91+
</ComponentWrapper>
92+
</div>
93+
))}
94+
</Layout>

‎src/scss/setup.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ $config: (
1111
--w-rating-color: #FFF;
1212
--w-rating-empty-color: #BBB;
1313
--w-rating-size: 18px;
14+
--w-switch-off-color: #252525;
15+
--w-switch-on-color: #FFF;
1416
}
1517

1618
@function config($key) {

0 commit comments

Comments
 (0)