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, { avatarSizeNames } from "./Avatar.svelte";
4
5 // `full` takes its size from the layout, so it has nothing to show in a ramp
6 const scale = avatarSizeNames.filter((size) => size !== "full");
7
8 const { Story } = defineMeta({
9 title: "UI/Avatar",
10 component: Avatar,
11 tags: ["autodocs"],
12 argTypes: {
13 did: { control: "text" },
14 src: { control: "text" },
15 handle: { control: "text" },
16 size: { control: "select", options: avatarSizeNames }
17 },
18 args: {
19 handle: "user.tld"
20 }
21 });
22</script>
23
24<Story name="Fallback" />
25<Story name="From a did" args={{ did: "did:plc:3p7ejjxnufohsygt5vbyxb2i" }} />
26<Story name="With image" args={{ src: "https://avatars.githubusercontent.com/u/1" }} />
27<Story name="Broken image" args={{ src: "https://example.invalid/broken.png" }} />
28
29<Story name="Sizes" asChild>
30 <div class="flex items-end gap-3">
31 {#each scale as size (size)}
32 <div class="flex flex-col items-center gap-1">
33 <Avatar handle="user.tld" {size} />
34 <span class="typography-paragraph-mini text-foreground-muted">{size}</span>
35 </div>
36 {/each}
37 </div>
38</Story>