initial docs

components/docs/mob-toc.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { ListIcon } from "lucide-react";
+import TocObserver from "./toc-observer";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+interface MobTocProps {
+  tocs: {
+    level: number;
+    text: string;
+    href: string;
+  }[];
+}
+
+export default function MobToc({ tocs }: MobTocProps) {
+  return (
+    <div className="lg:hidden block w-full">
+      <Accordion type="single" collapsible>
+        <AccordionItem value="toc">
+          <AccordionTrigger className="hover:no-underline">
+            <div className="flex items-center gap-2">
+              <ListIcon className="w-4 h-4" />
+              <span className="font-medium text-sm">On this page</span>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="h-auto py-2">
+            <TocObserver data={tocs} />
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+}