34 lines
930 B
TypeScript
34 lines
930 B
TypeScript
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, Box, Flex, useBreakpointValue } from "@chakra-ui/react";
|
||
import { Link, useParams } from "react-router-dom";
|
||
|
||
interface LinkChunk {
|
||
name: string;
|
||
link: string;
|
||
}
|
||
|
||
export default function MainHeader() {
|
||
const { sectionId, moduleId } = useParams();
|
||
const linkChunks: LinkChunk[] = [{ name: "Hi", link: "https://dunemask.net" }];
|
||
|
||
return (
|
||
<Box
|
||
display="flex"
|
||
width="100%"
|
||
position="fixed"
|
||
top="0"
|
||
shadow="md" // Optional: Add shadow for better separation from other content
|
||
>
|
||
<Flex p={4} width="100%">
|
||
<Breadcrumb separator="›">
|
||
{linkChunks.map((lc, i) => (
|
||
<BreadcrumbItem key={i}>
|
||
<BreadcrumbLink as={Link} to={lc.link}>
|
||
{lc.name}
|
||
</BreadcrumbLink>
|
||
</BreadcrumbItem>
|
||
))}
|
||
</Breadcrumb>
|
||
</Flex>
|
||
</Box>
|
||
);
|
||
}
|