[INIT] Initial Project Structure

src/components/MainHeader.tsx

@@ -0,0 +1,34 @@
+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>
+  );
+}