Monorepo for Tangled
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758<script lang="ts"> import { resolve } from "$app/paths"; import Newspaper from "$icon/newspaper"; 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"; import Button from "$lib/components/ui/Button.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." messageDirection="vertical"> <Button href={timelineHref} icon={Newspaper} variant="ghost">Browse the timeline</Button> </EmptyState> {/if}</div>