Skip to content

Commit f34899d

Browse files
FrontendlandFrontendland
committed
✨ Add Avatar component for Astro
1 parent 1148a02 commit f34899d

14 files changed

+234
-10
lines changed

‎public/img/avatar0.png

3.21 KB
Loading

‎public/img/avatar1.png

3.09 KB
Loading

‎public/img/avatar2.png

3.11 KB
Loading

‎public/img/avatar3.png

3.05 KB
Loading

‎public/img/avatar4.png

3.05 KB
Loading

‎src/components/Avatar/Avatar.astro

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
import type { AvatarProps } from './avatar'
3+
import './avatar.scss'
4+
5+
interface Props extends AvatarProps {}
6+
7+
const {
8+
img,
9+
alt = 'Avatar',
10+
size = 40,
11+
lazy = true,
12+
borderColor,
13+
borderless,
14+
reverse,
15+
className,
16+
} = Astro.props
17+
18+
const classes = [
19+
'w-avatar',
20+
borderless && 'borderless',
21+
className
22+
]
23+
---
24+
25+
{Array.isArray(img) ? (
26+
<div class:list={['w-avatar-group', reverse && 'reverse']}
27+
style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
28+
>
29+
{img.map((img, index) => (
30+
<img
31+
src={img}
32+
alt={Array.isArray(alt) ? alt[index] : alt}
33+
width={Array.isArray(size) ? size[index] : size}
34+
height={Array.isArray(size) ? size[index] : size}
35+
loading={lazy ? 'lazy' : null}
36+
class:list={classes}
37+
style={Array.isArray(size) ? `--w-avatar-index: ${size[index]}` : null}
38+
/>
39+
))}
40+
</div>
41+
) : (
42+
<img
43+
src={img}
44+
alt={Array.isArray(alt) ? alt[0] : alt}
45+
width={Array.isArray(size) ? size[0] : size}
46+
height={Array.isArray(size) ? size[0] : size}
47+
class:list={classes}
48+
loading={lazy ? 'lazy' : null}
49+
style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
50+
/>
51+
)}

‎src/components/Avatar/Avatar.svelte

Whitespace-only changes.

‎src/components/Avatar/Avatar.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const Avatar = () => {}
2+
3+
export default Avatar

‎src/components/Avatar/avatar.scss

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@import '../../scss/config.scss';
2+
3+
.w-avatar {
4+
border-radius: 100%;
5+
6+
&:not(.borderless) {
7+
border: 3px solid var(--w-avatar-border);
8+
}
9+
}
10+
11+
.w-avatar-group {
12+
display: inline-flex;
13+
align-items: center;
14+
15+
&.reverse {
16+
flex-direction: row-reverse;
17+
18+
img {
19+
z-index: 1;
20+
}
21+
22+
img:not(:first-child) {
23+
margin-right: -10px;
24+
margin-left: 0;
25+
}
26+
}
27+
28+
img:not(:first-child) {
29+
margin-left: -10px;
30+
}
31+
32+
img {
33+
z-index: var(--w-avatar-index);
34+
}
35+
}

‎src/components/Avatar/avatar.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export type AvatarProps = {
2+
img: string | string[]
3+
alt?: string | string[]
4+
size?: number | number[]
5+
lazy?: boolean
6+
borderColor?: string
7+
borderless?: boolean
8+
reverse?: boolean
9+
className?: string
10+
}

‎src/pages/avatar.astro

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
---
2+
import Layout from '@static/Layout.astro'
3+
import ComponentWrapper from '@static/ComponentWrapper.astro'
4+
5+
import AstroAvatar from '@components/Avatar/Avatar.astro'
6+
import SvelteBadge from '@components/Badge/Badge.svelte'
7+
import ReactBadge from '@components/Badge/Badge.tsx'
8+
9+
const sections = [
10+
{
11+
title: 'Astro avatars',
12+
component: AstroAvatar
13+
},
14+
// {
15+
// title: 'Svelte avatars',
16+
// component: SvelteBadge
17+
// },
18+
// {
19+
// title: 'React avatars',
20+
// component: ReactBadge
21+
// }
22+
]
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+
]
31+
---
32+
33+
<Layout>
34+
<h1>Avatar</h1>
35+
<div class="grid md-2 lg-3">
36+
<ComponentWrapper type="Astro">
37+
<AstroAvatar img="/img/avatar0.png" />
38+
</ComponentWrapper>
39+
40+
<ComponentWrapper type="Svelte">
41+
<SvelteBadge theme="alert">
42+
Badge in Svelte
43+
</SvelteBadge>
44+
</ComponentWrapper>
45+
46+
<ComponentWrapper type="React">
47+
<ReactBadge theme="info">
48+
Badge in React
49+
</ReactBadge>
50+
</ComponentWrapper>
51+
</div>
52+
53+
{sections.map(section => (
54+
<h1>{section.title}</h1>
55+
<div class="grid md-2 lg-3">
56+
<ComponentWrapper title="Single avatar with custom border color">
57+
<section.component
58+
img="/img/avatar0.png"
59+
borderColor="#1dd1a1"
60+
/>
61+
</ComponentWrapper>
62+
63+
<ComponentWrapper title="Borderless avatar">
64+
<section.component
65+
img="/img/avatar0.png"
66+
borderless={true}
67+
/>
68+
</ComponentWrapper>
69+
70+
<ComponentWrapper title="Avatar with size">
71+
<section.component
72+
img="/img/avatar0.png"
73+
size={50}
74+
/>
75+
</ComponentWrapper>
76+
77+
<ComponentWrapper title="Avatar group">
78+
<section.component img={group} />
79+
</ComponentWrapper>
80+
81+
<ComponentWrapper title="Borderless avatars">
82+
<section.component
83+
borderless={true}
84+
img={group}
85+
/>
86+
</ComponentWrapper>
87+
88+
<ComponentWrapper title="Avatars in reverse order">
89+
<section.component
90+
reverse={true}
91+
img={group}
92+
/>
93+
</ComponentWrapper>
94+
95+
<ComponentWrapper title="Avatars with increasing sizes">
96+
<section.component
97+
size={[35, 40, 45, 50, 55]}
98+
img={group}
99+
/>
100+
</ComponentWrapper>
101+
102+
<ComponentWrapper title="Avatars with decreasing sizes">
103+
<section.component
104+
size={[55, 50, 45, 40, 35]}
105+
img={group}
106+
/>
107+
</ComponentWrapper>
108+
109+
<ComponentWrapper title="Avatars with varying sizes">
110+
<section.component
111+
size={[30, 40, 50, 40, 30]}
112+
img={group}
113+
/>
114+
</ComponentWrapper>
115+
</div>
116+
))}
117+
</Layout>

‎src/pages/card.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const sections = [
4242
<h1>{section.title}</h1>
4343
<div class="grid md-2 lg-3">
4444
<section.component title="Titled card" compact={true}>
45-
Card with title
45+
Compact card with title
4646
</section.component>
4747

4848
<section.component title="Spacious">

‎src/pages/index.astro

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22
import Layout from '@static/Layout.astro'
33
import CardWrapper from '@static/CardWrapper.astro'
44
5-
import Button from '@components/Button/Button.astro'
65
import Accordion from '@components/Accordion/Accordion.astro'
7-
import Icon from '@components/Icon/Icon.astro'
8-
import Badge from '@components/Badge/Badge.astro'
96
import Alert from '@components/Alert/Alert.astro'
7+
import Avatar from '@components/Avatar/Avatar.astro'
8+
import Badge from '@components/Badge/Badge.astro'
9+
import Button from '@components/Button/Button.astro'
10+
import Icon from '@components/Icon/Icon.astro'
1011
---
1112

1213
<Layout>
@@ -44,6 +45,15 @@ import Alert from '@components/Alert/Alert.astro'
4445
}]}
4546
/>
4647
</CardWrapper>
48+
<CardWrapper title="Alert" href="/alert">
49+
<Alert title="💡 Note">You can create alert boxes.</Alert>
50+
</CardWrapper>
51+
<CardWrapper title="Avatar" href="/avatar">
52+
<Avatar img="/img/avatar0.png" />
53+
</CardWrapper>
54+
<CardWrapper title="Badge" href="/badge">
55+
<Badge theme="outline">Badge</Badge>
56+
</CardWrapper>
4757
<CardWrapper title="Button" href="/button">
4858
<Button>Primary</Button>
4959
<Button theme="secondary">Secondary</Button>
@@ -54,12 +64,6 @@ import Alert from '@components/Alert/Alert.astro'
5464
<CardWrapper title="Icon" href="/icon">
5565
<Icon type="github" />
5666
</CardWrapper>
57-
<CardWrapper title="Badge" href="/badge">
58-
<Badge theme="outline">Badge</Badge>
59-
</CardWrapper>
60-
<CardWrapper title="Alert" href="/alert">
61-
<Alert title="💡 Note">You can create alert boxes.</Alert>
62-
</CardWrapper>
6367
</div>
6468
</Layout>
6569

‎src/scss/setup.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ $config: (
66
includeElementStyles: true
77
);
88

9+
:root {
10+
--w-avatar-border: #000;
11+
}
12+
913
@function config($key) {
1014
@return map.get($config, $key);
1115
}

0 commit comments

Comments
 (0)