Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788<script lang="ts"> import { resolve } from "$app/paths"; import Avatar from "$lib/components/ui/Avatar.svelte"; import Users from "$icon/users"; import FollowButton from "$lib/components/profile/FollowButton.svelte"; import type { FollowChange, PersonData } from "$lib/components/profile/types"; import { createOptimisticCount } from "$lib/optimistic.svelte"; import Separator from "$lib/components/ui/Separator.svelte"; import { formatCount } from "$lib/format";
let { person, onFollow, followButton = true }: { person: PersonData; onFollow?: (change: FollowChange) => void; followButton?: boolean; } = $props();
const followerCount = createOptimisticCount({ key: () => person.did, loaded: () => person.followers });
const followed = (change: FollowChange) => { followerCount.adjust(change.delta); onFollow?.(change); };</script>
<div class="flex flex-col gap-md md:flex-row md:items-start md:justify-between"> <div class="flex min-w-0 flex-1 items-center gap-md"> <div class="flex size-24 shrink-0 items-center justify-center"> <Avatar did={person.did} handle={person.handle} size="full" /> </div>
<div class="flex min-w-0 flex-1 flex-col justify-around"> <div class="flex max-w-full items-center gap-xs"> <a href={resolve(`/${person.handle}` as "/")} class="min-w-0 truncate font-semibold text-foreground-default hover:underline" > {person.handle} </a> {#if person.pronouns} <span class="shrink-0 whitespace-nowrap text-foreground-muted" >{person.pronouns}</span > {/if} </div> {#if person.description} <p class="pb-xs wrap-break-word md:pb-xs"> {person.description} </p> {/if} <div class="my-xs flex max-w-full items-center gap-xs truncate text-foreground-subtle"> <Users class="size-3.5 shrink-0" /> <span ><a href={resolve(`/${person.handle}?tab=followers` as "/")} class="hover:text-foreground-default hover:underline" >{formatCount(followerCount.value)} followers</a ></span > <Separator variant="dot" /> <span ><a href={resolve(`/${person.handle}?tab=following` as "/")} class="hover:text-foreground-default hover:underline" >{formatCount(person.following)} following</a ></span > </div> </div> </div>
{#if !person.isSelf && followButton} <div class="w-full md:w-auto md:max-w-32"> <FollowButton profileDid={person.did} initialRkey={person.viewerFollowRkey} onCommit={followed} /> </div> {/if}</div>