This repository has no description
1<script lang="ts">
2 import { resolve } from "$app/paths";
3 import GitBranch from "$icon/git-branch";
4 import GitCommitHorizontal from "$icon/git-commit-horizontal";
5 import SearchCode from "$icon/search-code";
6 import Tags from "$icon/tags";
7 import CloneDropdown from "./CloneDropdown.svelte";
8 import RefSelector from "./RefSelector.svelte";
9 import type { RepoInfo } from "./types";
10
11 interface Props {
12 repo: RepoInfo;
13 ref: string;
14 refs: { branches: string[]; tags: string[] };
15 totalCommits: number;
16 totalBranches: number;
17 totalTags: number;
18 bobbinUrl: string;
19 }
20
21 let { repo, ref, refs, totalCommits, totalBranches, totalTags, bobbinUrl }: Props = $props();
22
23 const base = $derived(`/${repo.ownerHandle}/${repo.name}`);
24 const encodedRef = $derived(encodeURIComponent(ref));
25</script>
26
27<div class="flex flex-wrap items-center justify-between gap-3 pb-5">
28 <RefSelector
29 ownerHandle={repo.ownerHandle}
30 repoName={repo.name}
31 current={ref}
32 branches={refs.branches}
33 tags={refs.tags}
34 />
35
36 <form
37 class="order-last flex h-8 w-full items-center md:order-none md:w-64"
38 method="GET"
39 action={resolve(`${base}/search` as "/")}
40 >
41 <div class="relative flex h-full w-full items-center">
42 <SearchCode
43 class="pointer-events-none absolute left-2 size-4 text-foreground-placeholder"
44 aria-hidden="true"
45 />
46 <input
47 class="h-full w-full rounded border border-border-default bg-background-default py-1 pr-2 pl-8 text-sm outline-none focus:border-border-strong"
48 type="text"
49 name="q"
50 placeholder="Find files or code..."
51 aria-label="Search this repository"
52 />
53 </div>
54 </form>
55
56 <div class="flex items-center gap-3">
57 <a
58 href={resolve(`${base}/commits/${encodedRef}` as "/")}
59 class="inline-flex items-center gap-1 text-sm font-medium text-foreground-default no-underline hover:underline md:hidden"
60 >
61 <GitCommitHorizontal class="size-4" aria-hidden="true" />
62 {totalCommits}
63 </a>
64 <a
65 href={resolve(`${base}/branches` as "/")}
66 class="inline-flex items-center gap-1 text-sm font-medium text-foreground-default no-underline hover:underline md:hidden"
67 >
68 <GitBranch class="size-4" aria-hidden="true" />
69 {totalBranches}
70 </a>
71 <a
72 href={resolve(`${base}/tags` as "/")}
73 class="inline-flex items-center gap-1 text-sm font-medium text-foreground-default no-underline hover:underline md:hidden"
74 >
75 <Tags class="size-4" aria-hidden="true" />
76 {totalTags}
77 </a>
78 <CloneDropdown {repo} {ref} {bobbinUrl} />
79 </div>
80</div>