From a036c449f77908b7ea740944c9bdae225b63e233 Mon Sep 17 00:00:00 2001 From: Frank Delaguila Date: Fri, 4 Nov 2022 15:40:07 -0600 Subject: [PATCH] Adding in modal for card detail when card is clicked. Working through styling, and working with NextJS. --- components/ClientOnlyPortal.tsx | 19 ++++++++++ components/modal.tsx | 14 ++++++++ pages/_document.tsx | 17 +++++++++ pages/index.tsx | 63 ++++++++++++++++++++------------- styles/Home.module.css | 10 +++++- styles/globals.css | 8 +++++ 6 files changed, 106 insertions(+), 25 deletions(-) create mode 100644 components/ClientOnlyPortal.tsx create mode 100644 components/modal.tsx create mode 100644 pages/_document.tsx diff --git a/components/ClientOnlyPortal.tsx b/components/ClientOnlyPortal.tsx new file mode 100644 index 0000000..d28aa2a --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/components/modal.tsx b/components/modal.tsx new file mode 100644 index 0000000..7e1397d --- /dev/null +++ b/components/modal.tsx @@ -0,0 +1,14 @@ +import { createPortal } from "react-dom"; + +import ClientOnlyPortal from "./ClientOnlyPortal"; + +export default function Modal({open}: { open: Function }) { + return ( + +
+ Hello + +
+ + ); +} \ No newline at end of file diff --git a/pages/_document.tsx b/pages/_document.tsx new file mode 100644 index 0000000..b855d0f --- /dev/null +++ b/pages/_document.tsx @@ -0,0 +1,17 @@ +import { Html, Head, Main, NextScript } from 'next/document'; + +export default function Document() { + return ( + + + Magic Card Valuator + + +
+ {/* Here we will mount our modal portal */} +