remove all styled-jsx from components

pages/notes/[slug].tsx

@@ -1,12 +1,11 @@
 import { useMemo } from "react";
-import { useInView } from "react-intersection-observer";
-import dynamic from "next/dynamic";
+import { InView } from "react-intersection-observer";
 import { NextSeo, ArticleJsonLd } from "next-seo";
 import { escape } from "html-escaper";
 import { getMDXComponent } from "mdx-bundler/client";
 import Content from "../../components/Content";
 import Meta from "../../components/notes/Meta";
-import Loading from "../../components/loading/Loading";
+import Comments from "../../components/notes/Comments";
 import CustomCode from "../../components/code-block/Code";
 import { getNote, getNoteSlugs } from "../../lib/parse-notes";
 import * as config from "../../lib/config";
@@ -15,19 +14,6 @@ import type { NoteType } from "../../types";
 
 const Note = ({ frontMatter, mdxSource }: NoteType) => {
   const MDXComponent = useMemo(() => getMDXComponent(mdxSource, { process }), [mdxSource]);
-  const [commentsRef, commentsInView] = useInView({
-    rootMargin: "100px", // start loading comments script 100px from end of content
-    triggerOnce: true, // don't unload one it's loaded (if user scrolls back up)
-    fallbackInView: true,
-  });
-  const Comments = dynamic(() => import("../../components/notes/Comments"), {
-    ssr: false,
-    loading: () => (
-      <div style={{ display: "block", margin: "5em auto 3.5em auto", textAlign: "center" }}>
-        <Loading boxes={3} width={50} />
-      </div>
-    ),
-  });
 
   return (
     <>
@@ -73,7 +59,13 @@ const Note = ({ frontMatter, mdxSource }: NoteType) => {
         <MDXComponent components={{ code: CustomCode }} />
       </Content>
       {frontMatter.noComments !== true && (
-        <div ref={commentsRef}>{commentsInView && <Comments title={frontMatter.title} />}</div>
+        <InView rootMargin="140px" triggerOnce={true} fallbackInView={true}>
+          {({ inView, ref }) => (
+            <div id="comments" ref={ref}>
+              {inView && <Comments title={frontMatter.title} />}
+            </div>
+          )}
+        </InView>
       )}
     </>
   );