Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758<script module lang="ts"> import { defineMeta } from "@storybook/addon-svelte-csf"; import FollowCard from "$lib/components/profile/FollowCard.svelte"; import type { PersonData } from "$lib/components/profile/types";
const person: PersonData = { did: "did:plc:3p7ejjxnufohsygt5vbyxb2i", handle: "joshka.net", description: "Rust, TUIs, and the occasional git plumbing yak-shave.", followers: 128, following: 87, viewerFollowRkey: null, isSelf: true };
const { Story } = defineMeta({ title: "Profile/FollowCard", component: FollowCard, tags: ["autodocs"], parameters: { bones: { class: "w-[calc(100%-3rem)] md:w-[calc(72.7273%-2.4545rem)]" } }, argTypes: { border: { control: "boolean" }, shadow: { control: "boolean" }, background: { control: "boolean" } }, args: { person, border: false, shadow: false, background: false } });</script>
<!-- default: layout-only (plain), as used on the timeline --><Story name="Plain (timeline)" /><Story name="Bordered" args={{ border: true, background: true }} />
<Story name="With follow button" parameters={{ auth: true }}> {#snippet template(args)} <FollowCard {...args} person={{ ...person, isSelf: false }} border background /> {/snippet}</Story>
<!-- counts past a thousand abbreviate rather than widening the row --><Story name="Large counts" args={{ person: { ...person, followers: 12_345, following: 1_200_000 }, border: true, background: true }}/>