Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263<script lang="ts"> import { untrack, type Snippet } from "svelte"; import { resolve } from "$app/paths"; import ArrowRight from "$icon/arrow-right"; import { PINNED_LIMIT } from "#lib/api/pinning.ts"; import { getPinnedEdit } from "#lib/components/profile/pinnedEdit.svelte.ts"; import PinnedReposEditor from "#lib/components/profile/PinnedReposEditor.svelte"; import PinSuggestions from "#lib/components/profile/PinSuggestions.svelte"; import RepoCard from "#lib/components/repo/RepoCard.svelte"; import Button from "#lib/components/ui/Button.svelte"; import { repoKey, type RepoCardData } from "#lib/components/profile/types.ts";
interface Props { repositories: RepoCardData[]; actor: string; href?: string; showOwner?: boolean; action?: Snippet; }
let { repositories, actor, href, showOwner = false, action }: Props = $props();
const edit = getPinnedEdit(); untrack(() => edit?.remember(repositories)); const shown = $derived(edit ? edit.shown(repositories) : repositories);</script>
{#if edit?.canPin && !edit.editing && (shown.length === 0 || edit.suggesting)} <PinSuggestions {edit} {action} />{:else if edit?.editing || shown.length > 0} <section class="@container space-y-xs"> <div class="flex items-center justify-between gap-xs"> <h2 class="px-xs typography-paragraph-regular font-medium">Pinned repositories</h2> {@render action?.()} </div> {#if edit?.editing} <PinnedReposEditor bind:keys={edit.keys} bind:cards={edit.cards} did={edit.did} handle={edit.handle} {showOwner} /> {:else} <div class="grid grid-cols-1 gap-xs @min-[42rem]:grid-cols-2"> {#each shown.slice(0, PINNED_LIMIT) as repo (repoKey(repo))} <RepoCard {repo} starButton={false} {showOwner} uniformHeight /> {/each} </div> <div class="flex justify-end pt-xs"> <Button variant="ghost" href={resolve((href ?? `/${actor}?tab=repos`) as "/")} icon={ArrowRight} iconSide="right" > View all repositories </Button> </div> {/if} </section>{/if}