35 lines
930 B
TypeScript
35 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>
|
|||
|
|
);
|
|||
|
|
}
|