Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899<script lang="ts"> import { resolve } from "$app/paths"; import { stringHref } from "$lib/components/strings/urls"; import Pencil from "$icon/pencil"; import Trash2 from "$icon/trash-2"; import Avatar from "$lib/components/ui/Avatar.svelte"; import Button from "$lib/components/ui/Button.svelte"; import StarButton from "$lib/components/repo/StarButton.svelte";
interface Props { ownerHandle: string; ownerDid: string; rkey: string; filename: string; description?: string; isOwner?: boolean; stringUri: string; initialStarCount?: number | Promise<number>; initialStarRkey?: string | null | Promise<string | null>; onedit?: () => void; ondelete?: () => void; deleting?: boolean; }
let { ownerHandle, ownerDid, rkey, filename, description = "", isOwner = false, stringUri, initialStarCount, initialStarRkey, onedit, ondelete, deleting = false }: Props = $props();
const selfHref = $derived(stringHref(ownerHandle, rkey)); const profileHref = $derived(resolve(`/${ownerHandle}` as "/"));</script>
<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"> <div class="flex flex-col gap-2"> <div class="flex flex-wrap items-center gap-2 typography-paragraph-regular"> <a href={profileHref} class="flex items-center gap-2 no-underline hover:underline"> <Avatar did={ownerDid} handle={ownerHandle} size="regular" /> <span class="font-medium text-foreground-default">{ownerHandle}</span> </a> <span class="text-foreground-muted select-none">/</span> <a href={selfHref} class="font-bold text-foreground-default no-underline hover:underline" > {filename} </a> </div>
{#if description} <p class="typography-paragraph-small text-foreground-muted"> {description} </p> {:else} <p class="typography-paragraph-small text-foreground-muted italic"> This string has no description </p> {/if} </div>
<div class="flex shrink-0 items-center gap-2"> {#if isOwner} <Button variant="default" size="small" icon={Pencil} onclick={onedit} disabled={deleting} > Edit </Button> <Button variant="danger" size="small" icon={Trash2} onclick={ondelete} disabled={deleting} > Delete </Button> {/if} <StarButton subject={{ kind: "string", uri: stringUri }} initialCount={initialStarCount} initialRkey={initialStarRkey} /> </div></div>