Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109<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.ts"; import { createOptimisticCount } from "#lib/optimistic.svelte.ts"; import Separator from "#lib/components/ui/Separator.svelte"; import { formatCount, pluralize } from "#lib/format.ts"; import { profileIdentifier } from "#lib/api/identity.ts";
let { person, onFollow, followButton = true }: { person: PersonData; onFollow?: (change: FollowChange) => void; followButton?: boolean; } = $props();
const identifier = $derived(profileIdentifier(person.handle, person.did)); const profilePath = $derived(`/${identifier}`);
const followerCount = createOptimisticCount({ key: () => person.did, loaded: () => person.followers });
const followed = (change: FollowChange) => { followerCount.adjust(change.delta); onFollow?.(change); };</script>
<div data-testid="person" data-handle={person.handle} data-followers={followerCount.value} data-following={person.following} class="flex flex-col gap-md @compact:flex-row @compact:items-start @compact:justify-between"> <div class="flex min-w-0 flex-1 items-center gap-md"> <a href={resolve(profilePath as "/")} tabindex="-1" aria-hidden="true" class="flex size-24 shrink-0 items-center justify-center" > <Avatar did={person.did} avatarCid={person.avatarCid} handle={person.handle} size="full" pixels={96} /> </a>
<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(profilePath as "/")} class="max-w-full shrink-0 truncate font-semibold text-foreground-default hover:underline" > {identifier} </a> {#if person.pronouns} <span class="min-w-0 truncate text-foreground-muted" title={person.pronouns} >{person.pronouns}</span > {/if} </div> {#if person.description} <p class="mb-xs line-clamp-1 wrap-break-word" title={person.description}> {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(`${profilePath}?tab=followers` as "/")} class="hover:text-foreground-default hover:underline" >{pluralize(followerCount.value, "follower", "followers")}</a ></span > <Separator variant="dot" /> <span ><a href={resolve(`${profilePath}?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 @compact:w-auto @compact:max-w-32"> <FollowButton profileDid={person.did} initialRkey={person.viewerFollowRkey} onCommit={followed} /> </div> {/if}</div>