Adding in modal for card detail when card is clicked. Working through styling, and working with NextJS.

components/ClientOnlyPortal.tsx

@@ -0,0 +1,19 @@
+import { useRef, useEffect, useState, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+interface Props {
+  children: ReactNode
+  selector: string
+}
+
+export default function ClientOnlyPortal({ children, selector }: Props) {
+  const ref = useRef();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    ref.current = document.querySelector(selector);
+    setMounted(true);
+  }, [selector]);
+
+  return mounted ? createPortal(children, ref.current!) : null;
+}

components/modal.tsx

@@ -0,0 +1,14 @@
+import { createPortal } from "react-dom";
+
+import ClientOnlyPortal from "./ClientOnlyPortal";
+
+export default function Modal({open}: { open: Function }) {
+  return (
+    <ClientOnlyPortal selector="#modal-root">
+      <div className='fixed bottom-0 container left-0 rounded-md modal'>
+        Hello
+        <button onClick={() => open(false)}>Close</button>
+      </div>
+    </ClientOnlyPortal>
+   );
+}