alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { defineMeta } from "@storybook/addon-svelte-csf";
3 import Avatar from "./Avatar.svelte";
4
5 const { Story } = defineMeta({
6 title: "UI/Avatar",
7 component: Avatar,
8 tags: ["autodocs"],
9 argTypes: {
10 src: { control: "text" },
11 handle: { control: "text" },
12 size: { control: "text" }
13 },
14 args: {
15 handle: "user.tld"
16 }
17 });
18</script>
19
20<Story name="Fallback" />
21<Story name="With image" args={{ src: "https://avatars.githubusercontent.com/u/1" }} />
22<Story name="Broken image" args={{ src: "https://example.invalid/broken.png" }} />
23
24<Story name="Sizes" asChild>
25 <div class="flex items-center gap-3">
26 <Avatar handle="user.tld" size="size-6" />
27 <Avatar handle="user.tld" size="size-10" />
28 <Avatar handle="user.tld" size="size-16" />
29 </div>
30</Story>