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 did: { control: "text" },
11 src: { control: "text" },
12 handle: { control: "text" },
13 tiny: { control: "boolean" },
14 size: { control: "text" }
15 },
16 args: {
17 handle: "user.tld"
18 }
19 });
20</script>
21
22<Story name="Fallback" />
23<Story name="From a did" args={{ did: "did:plc:3p7ejjxnufohsygt5vbyxb2i" }} />
24<Story name="With image" args={{ src: "https://avatars.githubusercontent.com/u/1" }} />
25<Story name="Broken image" args={{ src: "https://example.invalid/broken.png" }} />
26
27<Story name="Sizes" asChild>
28 <div class="flex items-center gap-3">
29 <Avatar handle="user.tld" size="size-6" />
30 <Avatar handle="user.tld" size="size-10" />
31 <Avatar handle="user.tld" size="size-16" />
32 </div>
33</Story>