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 User from "./User.svelte";
4
5 const { Story } = defineMeta({
6 title: "UI/User",
7 component: User,
8 tags: ["autodocs"],
9 argTypes: {
10 handle: { control: "text" },
11 did: { control: "text" },
12 size: {
13 control: { type: "inline-radio" },
14 options: ["header", "large", "regular", "small", "mini"]
15 },
16 showImage: { control: "boolean" },
17 showText: { control: "boolean" }
18 },
19 args: {
20 handle: "user.tld",
21 size: "regular",
22 showImage: true,
23 showText: true
24 }
25 });
26</script>
27
28<Story name="Default" />
29<Story name="With avatar" args={{ did: "did:plc:3p7ejjxnufohsygt5vbyxb2i" }} />
30<Story name="Image only" args={{ showText: false }} />
31<Story name="Text only" args={{ showImage: false }} />
32
33<Story name="Sizes">
34 <div class="flex flex-col items-start gap-3">
35 <User size="header" />
36 <User size="large" />
37 <User size="regular" />
38 <User size="small" />
39 <User size="mini" />
40 </div>
41</Story>