Skip to content

Commit 56cd716

Browse files
FrontendlandFrontendland
committed
✨ Add Avatar components for React + Svelte
1 parent f34899d commit 56cd716

File tree

4 files changed

+159
-18
lines changed

4 files changed

+159
-18
lines changed

‎src/components/Avatar/Avatar.svelte

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

‎src/components/Avatar/Avatar.tsx

Lines changed: 61 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,63 @@
1-
const Avatar = () => {}
1+
import React from 'react'
2+
import type { AvatarProps } from './avatar'
3+
import './avatar.scss'
4+
5+
const Avatar = ({
6+
img,
7+
alt = 'Avatar',
8+
size = 40,
9+
lazy = true,
10+
borderColor,
11+
borderless,
12+
reverse,
13+
className,
14+
}: AvatarProps) => {
15+
const classes = [
16+
'w-avatar',
17+
borderless && 'borderless',
18+
className
19+
].filter(Boolean).join(' ')
20+
21+
const groupStyles = [
22+
'w-avatar-group',
23+
reverse && 'reverse'
24+
].filter(Boolean).join(' ')
25+
26+
const borderColorStyle = borderColor
27+
? { '--w-avatar-border': borderColor } as React.CSSProperties
28+
: undefined
29+
30+
return Array.isArray(img) ? (
31+
<div className={groupStyles}
32+
style={borderColorStyle}
33+
>
34+
{img.map((img, index) => (
35+
<img
36+
src={img}
37+
alt={Array.isArray(alt) ? alt[index] : alt}
38+
width={Array.isArray(size) ? size[index] : size}
39+
height={Array.isArray(size) ? size[index] : size}
40+
loading={lazy ? 'lazy' : undefined}
41+
className={classes}
42+
style={Array.isArray(size)
43+
? { '--w-avatar-index': size[index] } as React.CSSProperties
44+
: undefined
45+
}
46+
/>
47+
))}
48+
</div>
49+
) : (
50+
<img
51+
src={img}
52+
alt={Array.isArray(alt) ? alt[0] : alt}
53+
width={Array.isArray(size) ? size[0] : size}
54+
height={Array.isArray(size) ? size[0] : size}
55+
className={classes}
56+
loading={lazy ? 'lazy' : undefined}
57+
style={borderColorStyle}
58+
/>
59+
)
60+
61+
}
262

363
export default Avatar

‎src/pages/avatar.astro

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,22 @@ import Layout from '@static/Layout.astro'
33
import ComponentWrapper from '@static/ComponentWrapper.astro'
44
55
import AstroAvatar from '@components/Avatar/Avatar.astro'
6-
import SvelteBadge from '@components/Badge/Badge.svelte'
7-
import ReactBadge from '@components/Badge/Badge.tsx'
6+
import SvelteAvatar from '@components/Avatar/Avatar.svelte'
7+
import ReactAvatar from '@components/Avatar/Avatar.tsx'
88
99
const sections = [
1010
{
1111
title: 'Astro avatars',
1212
component: AstroAvatar
1313
},
14-
// {
15-
// title: 'Svelte avatars',
16-
// component: SvelteBadge
17-
// },
18-
// {
19-
// title: 'React avatars',
20-
// component: ReactBadge
21-
// }
14+
{
15+
title: 'Svelte avatars',
16+
component: SvelteAvatar
17+
},
18+
{
19+
title: 'React avatars',
20+
component: ReactAvatar
21+
}
2222
]
2323
2424
const group = [
@@ -34,19 +34,19 @@ const group = [
3434
<h1>Avatar</h1>
3535
<div class="grid md-2 lg-3">
3636
<ComponentWrapper type="Astro">
37-
<AstroAvatar img="/img/avatar0.png" />
37+
<AstroAvatar img="/img/avatar0.png" borderColor="#FFF" />
3838
</ComponentWrapper>
3939

4040
<ComponentWrapper type="Svelte">
41-
<SvelteBadge theme="alert">
41+
<SvelteAvatar img="/img/avatar1.png" borderColor="#ee5253">
4242
Badge in Svelte
43-
</SvelteBadge>
43+
</SvelteAvatar>
4444
</ComponentWrapper>
4545

4646
<ComponentWrapper type="React">
47-
<ReactBadge theme="info">
47+
<ReactAvatar img="/img/avatar1.png" borderColor="#48dbfb">
4848
Badge in React
49-
</ReactBadge>
49+
</ReactAvatar>
5050
</ComponentWrapper>
5151
</div>
5252

‎src/pages/index.astro

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,16 @@ import Icon from '@components/Icon/Icon.astro'
4949
<Alert title="💡 Note">You can create alert boxes.</Alert>
5050
</CardWrapper>
5151
<CardWrapper title="Avatar" href="/avatar">
52-
<Avatar img="/img/avatar0.png" />
52+
<Avatar
53+
size={[30, 40, 50, 40, 30]}
54+
img={[
55+
'/img/avatar0.png',
56+
'/img/avatar1.png',
57+
'/img/avatar2.png',
58+
'/img/avatar3.png',
59+
'/img/avatar4.png'
60+
]}
61+
/>
5362
</CardWrapper>
5463
<CardWrapper title="Badge" href="/badge">
5564
<Badge theme="outline">Badge</Badge>
@@ -62,7 +71,31 @@ import Icon from '@components/Icon/Icon.astro'
6271
<p>Paragraph inside a card</p>
6372
</CardWrapper>
6473
<CardWrapper title="Icon" href="/icon">
65-
<Icon type="github" />
74+
<Icon
75+
type="github"
76+
size={12}
77+
color="#32e3a0"
78+
/>
79+
<Icon
80+
type="github"
81+
size={16}
82+
color="#32cae3"
83+
/>
84+
<Icon
85+
type="github"
86+
size={20}
87+
color="#ad74f7"
88+
/>
89+
<Icon
90+
type="github"
91+
size={24}
92+
color="#ff89aa"
93+
/>
94+
<Icon
95+
type="github"
96+
size={30}
97+
color="#f2c262"
98+
/>
6699
</CardWrapper>
67100
</div>
68101
</Layout>

0 commit comments

Comments
 (0)