alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import SquareChartGantt from "$icon/square-chart-gantt";
3 import BookMarked from "$icon/book-marked";
4 import Star from "$icon/star";
5 import LineSquiggle from "$icon/line-squiggle";
6 import Shield from "$icon/shield";
7 import Tabs, { type TabDef } from "$lib/components/ui/Tabs.svelte";
8 import type { ProfileCounts } from "./types";
9
10 interface Props {
11 handle: string;
12 active: string;
13 counts: ProfileCounts;
14 }
15
16 let { handle, active, counts }: Props = $props();
17
18 const hrefFor = (id: string) => (id === "overview" ? `/${handle}` : `/${handle}?tab=${id}`);
19
20 const tabs = $derived<TabDef[]>([
21 { id: "overview", label: "Overview", icon: SquareChartGantt, href: hrefFor("overview") },
22 {
23 id: "repos",
24 label: "Repositories",
25 icon: BookMarked,
26 count: counts.repos,
27 href: hrefFor("repos")
28 },
29 { id: "starred", label: "Starred", icon: Star, count: counts.stars, href: hrefFor("starred") },
30 {
31 id: "strings",
32 label: "Strings",
33 icon: LineSquiggle,
34 count: counts.strings,
35 href: hrefFor("strings")
36 },
37 { id: "vouches", label: "Vouches", icon: Shield, href: hrefFor("vouches") }
38 ]);
39</script>
40
41<Tabs {tabs} {active} label="profile sections" />