create table of contents for blogs

2025-01-02 16:37:58 +00:00
parent 387ea3b52e
commit bb38ad62bf
2 changed files with 107 additions and 0 deletions
@@ -0,0 +1,37 @@
+import { Card, CardContent, CardHeader, Typography } from "@mui/material";
+import { Link } from "../muiLink";
+
+const TableOfContents = ({
+  headings,
+}: {
+  headings: { id: string; heading: string }[];
+}) => {
+  return (
+    <Card
+      elevation={0}
+      sx={{
+        width: "100%",
+        display: {
+          xs: "none",
+          md: "block",
+        },
+        p: 4,
+        position: "sticky",
+        top: 50,
+      }}
+    >
+      <CardHeader title="Table of contents" />
+      <CardContent>
+        {headings.map((heading) => (
+          <Link href={`#${heading.id}`} key={heading.id}>
+            <Typography variant="body2" sx={{ mb: 3 }}>
+              {heading.heading}
+            </Typography>
+          </Link>
+        ))}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default TableOfContents;
@@ -0,0 +1,70 @@
+import BreadcrumbsMUI from "@mui/material/Breadcrumbs";
+import Typography from "@mui/material/Typography";
+import Link from "next/link";
+
+interface BreadcrumbComponentProps {
+  items: BreadcrumbItemType[];
+}
+
+interface BreadcrumbItemType {
+  label: string;
+  href?: string;
+  isCurrentPage?: boolean;
+}
+
+export const Breadcrumbs = ({ items }: BreadcrumbComponentProps) => {
+  return (
+    <BreadcrumbsMUI
+      sx={{
+        color: "primary.main",
+        display: "flex",
+        margin: "0",
+        padding: "0",
+        alignItems: "center",
+      }}
+      separator={
+        <Typography
+          sx={{ display: "flex", height: "100%" }}
+          variant="subtitle3"
+        >
+          /
+        </Typography>
+      }
+      aria-label="breadcrumb"
+    >
+      {items.map((item) => {
+        // Check if it's the current page
+        if (item.isCurrentPage) {
+          return (
+            <Typography
+              sx={{
+                display: "flex",
+              }}
+              variant="subtitle3"
+              key={item.label}
+            >
+              {item.label}
+            </Typography>
+          );
+        }
+
+        // If it's not the current page, render a clickable link
+        return (
+          <Link key={item.label} href={item.href || "#"} passHref>
+            <Typography
+              sx={{
+                display: "flex",
+                "&:hover": {
+                  textDecoration: "underline",
+                },
+              }}
+              variant="subtitle3"
+            >
+              {item.label}
+            </Typography>
+          </Link>
+        );
+      })}
+    </BreadcrumbsMUI>
+  );
+};