74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
import { createQuery } from "@tanstack/solid-query";
|
|
import { activeURI, setRoute } from "../App";
|
|
import { callApi } from "../api";
|
|
import { Accessor, Show } from "solid-js";
|
|
|
|
interface HeaderProps {
|
|
clan_dir: Accessor<string | null>;
|
|
}
|
|
export const Header = (props: HeaderProps) => {
|
|
const { clan_dir } = props;
|
|
|
|
const query = createQuery(() => ({
|
|
queryKey: [clan_dir(), "meta"],
|
|
queryFn: async () => {
|
|
const curr = clan_dir();
|
|
if (curr) {
|
|
const result = await callApi("show_clan_meta", { uri: curr });
|
|
if (result.status === "error") throw new Error("Failed to fetch data");
|
|
return result.data;
|
|
}
|
|
},
|
|
}));
|
|
|
|
return (
|
|
<div class="navbar">
|
|
<div class="flex-none">
|
|
<span class="tooltip tooltip-bottom" data-tip="Menu">
|
|
<label
|
|
class="btn btn-square btn-ghost drawer-button"
|
|
for="toplevel-drawer"
|
|
>
|
|
<span class="material-icons">menu</span>
|
|
</label>
|
|
</span>
|
|
</div>
|
|
<div class="flex-1">
|
|
<Show when={query.isLoading && !query.data}>
|
|
<div class="skeleton mx-4 size-11 rounded-full"></div>
|
|
<span class="flex flex-col gap-2">
|
|
<div class="skeleton h-3 w-32"></div>
|
|
<div class="skeleton h-3 w-40"></div>
|
|
</span>
|
|
</Show>
|
|
<Show when={query.data}>
|
|
{(meta) => (
|
|
<div class="tooltip tooltip-right" data-tip={activeURI()}>
|
|
<div class="avatar placeholder online mx-4">
|
|
<div class="w-10 rounded-full bg-slate-700 text-3xl text-neutral-content">
|
|
{meta().name.slice(0, 1)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Show>
|
|
<span class="flex flex-col">
|
|
<Show when={query.data}>
|
|
{(meta) => [
|
|
<span class="text-primary">{meta().name}</span>,
|
|
<span class="text-neutral">{meta()?.description}</span>,
|
|
]}
|
|
</Show>
|
|
</span>
|
|
</div>
|
|
<div class="flex-none">
|
|
<span class="tooltip tooltip-bottom" data-tip="Settings">
|
|
<button class="link" onClick={() => setRoute("settings")}>
|
|
<span class="material-icons">settings</span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|