71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
import { authClient } from "@/lib/auth-client";
|
|
import { queries } from "@/shared/src";
|
|
import { useQuery } from "@rocicorp/zero/react";
|
|
import { Link, usePathname, useRouter, type LinkProps } from "expo-router";
|
|
import { useEffect } from "react";
|
|
import { View, Text, Platform } from "react-native";
|
|
|
|
type Page = { name: string, href: LinkProps['href'] };
|
|
const PAGES: Page[] = [
|
|
{
|
|
name: "Home",
|
|
href: "/",
|
|
},
|
|
{
|
|
name: "Settings",
|
|
href: "/settings",
|
|
},
|
|
];
|
|
|
|
|
|
export default function Header() {
|
|
const router = useRouter();
|
|
const { data: session } = authClient.useSession();
|
|
const [user] = useQuery(queries.me(session));
|
|
|
|
useEffect(() => {
|
|
if (Platform.OS != 'web') return;
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === "1" && event.ctrlKey) {
|
|
router.push(PAGES.at(0)!.href);
|
|
} else if (event.key === "2" && event.ctrlKey) {
|
|
router.push(PAGES.at(1)!.href);
|
|
}
|
|
};
|
|
|
|
window.addEventListener("keydown", handleKeyDown);
|
|
|
|
return () => {
|
|
window.removeEventListener("keydown", handleKeyDown);
|
|
};
|
|
}, []);
|
|
|
|
|
|
return (
|
|
<View style={{ flexDirection: "row", justifyContent: "space-between", backgroundColor: "#efe" }}>
|
|
<View style={{ flexDirection: "row" }}>
|
|
{PAGES.map(page => <Page
|
|
key={page.name}
|
|
name={page.name}
|
|
href={page.href}
|
|
/>)}
|
|
</View>
|
|
|
|
<Link href={"#" as any}>
|
|
<Text style={{ fontFamily: 'mono' }}>{user?.name} </Text>
|
|
</Link>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function Page({ name, href }: Page) {
|
|
const path = usePathname();
|
|
|
|
return (
|
|
<Link href={href }>
|
|
<Text style={{ fontFamily: 'mono' }}>{path == href ? `[ ${name} ]` : ` ${name} `}</Text>
|
|
</Link>
|
|
)
|
|
|
|
}
|