Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | /**
* @packageDocumentation
*
* Global app header component. Displays the "Beat Muser" app title and the
* current project name when a project is open. Clicking the title navigates
* back to the project list.
*/
import { Box, Flex, Heading, Link } from "@radix-ui/themes";
import { useMatches, useNavigate } from "react-router";
import type { Project } from "../project-store/types";
/**
* Returns the project data from the current route matches, if any.
*/
function useCurrentProject(): Project | null {
const matches = useMatches();
for (const match of matches) {
const data = match.data as Project | undefined;
if (data && "displayName" in data && "slug" in data) {
return data;
}
}
return null;
}
export function AppHeader() {
const navigate = useNavigate();
const project = useCurrentProject();
return (
<Box px="4" py="2" style={{ borderBottom: "1px solid var(--gray-5)" }}>
<Flex align="center" gap="2">
<Link
onClick={(e) => {
e.preventDefault();
// @todo: Check for unsaved changes and confirm before navigating
// If there are unsaved changes, show a confirmation dialog.
// If the user confirms, navigate to home. Otherwise, do nothing.
void navigate("/");
}}
href="/"
style={{ textDecoration: "none", cursor: "pointer" }}
>
<Heading size="4" style={{ margin: 0 }}>
Beat Muser
</Heading>
</Link>
{project && (
<>
<Heading size="4" color="gray" style={{ margin: 0 }}>
/
</Heading>
<Heading size="4" style={{ margin: 0 }}>
{project.displayName}
</Heading>
</>
)}
</Flex>
</Box>
);
}
|