aylac.top
1import { type Accessor, createMemo, Show } from "solid-js";
2import { useRepoInfo } from "./context";
3
4function HeaderItem(props: {
5 path: string;
6 title: string;
7 icon: string;
8 windowPath: Accessor<string>;
9}) {
10 return (
11 <a
12 class={`flex h-full w-min flex-row content-center items-center gap-2 rounded-t px-4 py-1 ${props.windowPath() === props.title ? "bg-white dark:bg-gray-800" : "hover:dark:bg-gray-700/25"}`}
13 href={props.path}
14 >
15 <div class={`iconify ${props.icon}`} />
16 {props.title}
17 </a>
18 );
19}
20
21export function Header(props: { user: string; repo: string }) {
22 const repoInfo = useRepoInfo();
23 const path = createMemo(() => {
24 const path = window.location.pathname.split("/")[3];
25 return ["issues", "pulls", "pipelines"].includes(path) ? path : "overview";
26 });
27
28 return (
29 <Show when={repoInfo()} keyed>
30 {(repoInfo) => (
31 <>
32 <div class="m-5 mt-0 flex flex-row items-center justify-between gap-0.5">
33 <div class="flex flex-col gap-1">
34 <div class="flex flex-row items-center gap-1 text-base">
35 <a class="hover:underline" href={`/${props.user}`}>
36 @{props.user}
37 </a>
38 <span class="select-none text-xl">/</span>
39 <a
40 class="font-bold hover:underline"
41 href={`/${props.user}/${props.repo}`}
42 >
43 {props.repo}
44 </a>
45 </div>
46 <Show when={repoInfo.repo} keyed>
47 {(repo) => <div class="text-xs">{repo.description}</div>}
48 </Show>
49 </div>
50 <div class="flex flex-row gap-2">
51 <button
52 type="button"
53 class="btn flex flex-row items-center gap-1"
54 >
55 <div class="iconify gravity-ui--star" />
56 {repoInfo.stars.toString() || "0"}
57 </button>
58 <button
59 type="button"
60 class="btn flex flex-row items-center gap-1"
61 >
62 <div class="iconify gravity-ui--code-fork" />
63 {repoInfo.forks.toString() || "0"}
64 </button>
65 </div>
66 </div>
67 <div class="mx-4 flex flex-row gap-1">
68 <HeaderItem
69 title="overview"
70 path={`/${props.user}/${props.repo}`}
71 icon="gravity-ui--square-list-ul"
72 windowPath={path}
73 />
74 {/*<HeaderItem
75 title="issues"
76 path={`/${props.user}/${props.repo}/issues`}
77 icon="gravity-ui--circle-minus"
78 windowPath={path}
79 />*/}
80 </div>
81 </>
82 )}
83 </Show>
84 );
85}