an appview-less Bluesky client using Constellation and PDS Queries
reddwarf.app
whey.party
frontend
spa
bluesky
reddwarf
microcosm
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}: {
10 backButtonCallback?: () => void;
11 title?: string;
12}) {
13 const router = useRouter();
14 const [isAtTop] = useAtom(isAtTopAtom);
15 //const what = router.history.
16 return (
17 <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 sm:border-b ${!isAtTop && "shadow-sm"} sm:shadow-none sm:dark:bg-gray-950 sm:bg-white border-gray-200 dark:border-gray-700`}>
18 {backButtonCallback ? (<Link
19 to=".."
20 //className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg"
21 className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg"
22 onClick={(e) => {
23 e.preventDefault();
24 backButtonCallback();
25 }}
26 aria-label="Go back"
27 >
28 <IconMaterialSymbolsArrowBack className="w-6 h-6" />
29 </Link>) : (<div className="w-[0px]" />)}
30 <span className="text-[21px] sm:text-[19px] sm:font-semibold font-roboto">{title}</span>
31 </div>
32 );
33}