Move breadcrumb folder into design_system (#290)

src/components/design_system/breadcrumbs/Breadcrumbs.module.css

@@ -1,2 +1,18 @@
-/* PLACEHOLDER FOR DESIGN SYSTEMS COMPONENT CSS
-see notes in component file */
+.container {
+  position: fixed;
+  display: flex;
+  left: 200px;
+  z-index: 1;
+  padding: 1rem 0 1rem 2rem;
+  width: 100%;
+  background-color: var(--grey-100);
+}
+
+.link {
+  text-decoration: none;
+  color: var(--grey-10);
+}
+
+.link:hover {
+  text-decoration: underline;
+}

src/components/design_system/breadcrumbs/Breadcrumbs.tsx

@@ -1,9 +1,60 @@
-/** DESIGN SYSTEM COMPONENT PLACEHOLDER
- * 1) Make a local branch for organizing your component (e.g. "design-systems-button")
- * 2) Replace this file and the corresponding css file(s) with your component file(s), cleaning up any duplicate files that are outside of the design components folder.
- * 3) Search and find all use cases for your component (likely linting will tell you where they are) and update the import paths
- * 4) Check code for errors and delete this comment
- * 5) Push code to branch and do a PR referencing the specific issue task you took for issue # 255.
- * NOTE: If you want a css.d.ts file to be generated to help with any type issues, you can run `npm run type-css`
- * */
-export {};
+import { trpc } from "@/client/lib/trpc";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { SelectableForTable } from "zapatos/schema";
+import $breadcrumbs from "./Breadcrumbs.module.css";
+
+type Student = SelectableForTable<"student">;
+type Para = SelectableForTable<"user">;
+
+const BreadcrumbsNav = () => {
+  const router = useRouter();
+  const paths = router.asPath.split("/");
+
+  // student and para queries will only runs if enabled options are both true
+  // Only 1 of these will run at a time based on the conditions
+  const { data: student } = trpc.student.getStudentById.useQuery(
+    { student_id: paths[2] },
+    { enabled: Boolean(paths[2] && paths[1] === "students") }
+  );
+  const { data: para } = trpc.para.getParaById.useQuery(
+    { user_id: paths[2] },
+    { enabled: Boolean(paths[2] && paths[1] === "staff") }
+  );
+
+  const personData: Student | Para | undefined = student || para;
+
+  // An array of breadcrumbs fixed to students/staff as the first index. This will be modified depending on how the address bar will be displayed.
+  const breadcrumbs = paths.map((path, index) => {
+    // 0th index seems to only be empty string
+    if (index === 0) return "";
+    // 1st index currently is either students or staff
+    if (index % 2 === 1) {
+      return (
+        <Link key={index} href={`/${path}`} className={$breadcrumbs.link}>
+          {path.toUpperCase()}
+        </Link>
+      );
+    }
+    // 2nd index is the ID referencing 1st index
+    if (index === 2) {
+      return (
+        <div key={index} style={{ color: "var(--grey-10)" }}>
+          {personData?.first_name} {personData?.last_name}
+        </div>
+      );
+    }
+    return <div key={index}>{path}</div>;
+  });
+
+  return (
+    <div className={$breadcrumbs.container}>
+      <Breadcrumbs separator="/" aria-label="breadcrumb">
+        {breadcrumbs}
+      </Breadcrumbs>
+    </div>
+  );
+};
+
+export default BreadcrumbsNav;

src/components/navbar/NavBar.tsx

@@ -19,7 +19,7 @@ import { useRouter } from "next/router";
 import * as React from "react";
 import { MouseEventHandler } from "react";
 import $navbar from "./Navbar.module.css";
-import BreadcrumbsNav from "../breadcrumbs/BreadcrumbsNav";
+import BreadcrumbsNav from "../design_system/breadcrumbs/Breadcrumbs";
 
 interface NavItemProps {
   href?: string;
@@ -86,6 +86,7 @@ export default function NavBar() {
     );
   };
 
+  // Navigation Links
   const drawer = (
     <div className={$navbar.navbarDropdown}>
       <List>