whey.party
an independent Bluesky client using Constellation, PDS Queries, and other services
reddwarf.app
frontend
spa
bluesky
reddwarf
microcosm
client
app
1import { Link, useRouter } from "@tanstack/react-router";
2import { useAtom } from "jotai";
3
4import { isAtTopAtom } from "~/utils/atoms";
5
6export function Header({
7 backButtonCallback,
8 title,
9 bottomBorderDisabled,
10}: {
11 backButtonCallback?: () => void;
12 title?: string;
13 bottomBorderDisabled?: boolean;
14}) {
15 const router = useRouter();
16 const [isAtTop] = useAtom(isAtTopAtom);
17 //const what = router.history.
18 return (
19 <div className={`flex items-center gap-3 px-3 py-3 h-[52px] sticky top-0 bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] z-10 border-0 ${!bottomBorderDisabled && "sm:border-b"} ${!isAtTop && !bottomBorderDisabled && "shadow-sm"} sm:shadow-none sm:dark:bg-gray-950 sm:bg-white border-gray-200 dark:border-gray-700`}>
20 {backButtonCallback ? (<Link
21 to=".."
22 //className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg"
23 className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg"
24 onClick={(e) => {
25 e.preventDefault();
26 backButtonCallback();
27 }}
28 aria-label="Go back"
29 >
30 <IconMaterialSymbolsArrowBack className="w-6 h-6" />
31 </Link>) : (<div className="w-[0px]" />)}
32 <span className="text-[21px] sm:text-[19px] sm:font-semibold font-roboto">{title}</span>
33 </div>
34 );
35}