Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263<script lang="ts"> import { resolve } from "$app/paths"; import ArrowRight from "$icon/arrow-right"; import Compass from "$icon/compass"; import EmptyState from "$lib/components/ui/EmptyState.svelte"; import FollowCard from "$lib/components/profile/FollowCard.svelte"; import RepoCard from "$lib/components/repo/RepoCard.svelte"; import { repoKey, type PersonData, type RepoCardData } from "$lib/components/profile/types"; import StepHeader from "$lib/components/welcome/StepHeader.svelte";
let { people, repos, onInteract }: { people: PersonData[]; repos: RepoCardData[]; onInteract?: () => void; } = $props();
const timelineHref = resolve("/timeline");
const interacted = (active: boolean) => { if (active) onInteract?.(); };</script>
<div class="flex flex-col gap-6"> <StepHeader title="Discover" subtitle="Find users to follow and repositories to star." />
{#if people.length > 0 || repos.length > 0} {#if people.length > 0} <div class="flex flex-col gap-3"> {#each people as person (person.did)} <FollowCard {person} border onFollow={(change) => interacted(change.following)} /> {/each} </div> {/if}
{#if repos.length > 0} <div class="flex flex-col gap-3"> {#each repos as repo (repoKey(repo))} <RepoCard {repo} border onStar={(change) => interacted(change.starred)} /> {/each} </div> {/if} {:else} <EmptyState icon={Compass} message="No suggestions yet."> <a href={timelineHref} class="ml-2 flex w-fit items-center gap-1 typography-paragraph-small text-foreground-default no-underline hover:underline" > Browse the timeline <ArrowRight class="size-4 shrink-0" aria-hidden="true" /> </a> </EmptyState> {/if}</div>