Add new post toc

fix useLayoutEffect warnning

components/RUA/RUASandpack.tsx

@@ -1,4 +1,4 @@
-import { Sandpack, SandpackProps  } from '@codesandbox/sandpack-react';
+import { Sandpack, SandpackProps } from '@codesandbox/sandpack-react';
 import { useTheme } from 'next-themes';
 
 interface Props extends SandpackProps {}

components/post/SlideToc.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import tocbot from 'tocbot';
+
+const SlideToc = () => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  useEffect(() => {
+    // Waiting the right time.
+    mounted &&
+      tocbot.init({
+        tocSelector: '.toc',
+        contentSelector: '#post-content',
+        headingSelector: 'h1, h2, h3',
+      });
+
+    return () => tocbot.destroy();
+  }, [mounted]);
+
+  return (
+    <>
+      <div className="flex justify-end">
+        <div className="toc"></div>
+      </div>
+    </>
+  );
+};
+
+export default SlideToc;