Add: modal

src/components/elements/Modal.ts

@@ -0,0 +1,15 @@
+import { PrimitiveAtom, useAtom } from "jotai";
+
+export type DetailModal<T> = [data: T, setData: (data: T) => void];
+
+export const useDetailModal = <T>(atom: PrimitiveAtom<T>): DetailModal<T> => {
+    const [internalData, setInternalData] = useAtom<T>(atom);
+    const setData = (data: T): void => setInternalData(data);
+    return [internalData, setData];
+};
+
+export type SimpleModal = [isOpen: boolean, setOpen: (open: boolean) => void, toggle: () => void];
+export const useSimpleModal = (atom: PrimitiveAtom<boolean>): SimpleModal => {
+    const [isOpen, setOpen] = useDetailModal(atom);
+    return [isOpen, setOpen, (): void => setOpen(!isOpen)];
+};

src/components/elements/Toc.tsx

@@ -67,7 +67,12 @@ const RenderHeadingTree = ({ tree, indent }: { tree: HeadingTree[]; indent: numb
 
     return (
         <>
-            <ul className={clsx("ml-8", { "marker:text-accent marker:content-['-']": isTopLevel })}>
+            <ul
+                className={clsx("ml-8", {
+                    "marker:text-accent marker:content-['-']": isTopLevel,
+                    "marker:content-none": !isTopLevel,
+                })}
+            >
                 {tree.map((e) => (
                     <li key={e.id} className={clsx(levelClassNames[e.level], { "pl-2": isTopLevel }, "py-1")}>
                         <NextLink href={`#${e.id}`} scroll={true}>