Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192<script lang="ts"> import { twMerge } from "tailwind-merge"; import { resolve } from "$app/paths"; import LinkIcon from "$icon/link"; import UsersRound from "$icon/users-round"; import type { ProfileRecord } from "$lib/api/records"; import Bluesky from "$lib/components/icons/Bluesky.svelte"; import Link, { link } from "$lib/components/ui/Link.svelte"; import { formatCount } from "$lib/format";
interface Props { identity: { did: string; handle: string }; profile: ProfileRecord; followers: number; following?: number; followersHref?: string; followingHref?: string; class?: string; }
let { identity, profile, followers, following, followersHref, followingHref, class: className }: Props = $props();
const links = $derived((profile.links ?? []).filter((link) => link.trim().length > 0)); const linkLabel = (link: string) => { try { return new URL(link).hostname; } catch { return link; } };</script>
<div class={twMerge( "flex max-w-full flex-wrap items-center gap-2xs typography-paragraph-small", className )}> <div class="flex items-center gap-xs px-xs py-2xs"> <UsersRound class="size-3.5 shrink-0" aria-hidden="true" /> <Link href={resolve((followersHref ?? `/${identity.handle}?tab=followers`) as "/")} variant="inherit" size="small" > {formatCount(followers)} followers </Link> {#if following !== undefined} <span class="text-foreground-muted">·</span> <Link href={resolve((followingHref ?? `/${identity.handle}?tab=following`) as "/")} variant="inherit" size="small" > {formatCount(following)} following </Link> {/if} </div>
{#if profile.bluesky} <a href={`https://bsky.app/profile/${identity.did}`} class={link({ variant: "inherit", size: "small", class: "px-xs py-2xs" })} target="_blank" rel="external noopener noreferrer" > <Bluesky class="size-3.5" aria-hidden="true" /> {identity.handle} </a> {/if}
{#each links as profileLink (profileLink)} <a href={profileLink} class={link({ variant: "inherit", size: "small", class: "px-xs py-2xs" })} target="_blank" rel="external nofollow me noopener noreferrer" > <LinkIcon class="size-3.5 shrink-0" aria-hidden="true" /> <span class="max-w-48 truncate">{linkLabel(profileLink)}</span> </a> {/each}</div>