modal-tokyo

client/components/NftPage/NFTItem.js

@@ -1,11 +1,12 @@
-const NFTItem = ({ image, name }) => {
+const NFTItem = ({ image, name, desc }) => {
   return (
     <div className=" w-96 md:w-auto m-7 rounded-xl box-border overflow-hidden">
       <div className="flex xl:flex-col">
         <div className="md:shrink-0">
           <img
             src={image}
             alt={name}
+            desc={desc}
             className="w-96 h-72 xl:w-64 2xl:w-72 rounded-md"
           />
         </div>

client/components/NftPage/NFTListContainer.js

@@ -1,23 +1,33 @@
 import { useState } from 'react'
-import { useAllTokens } from '../../queries'
-import Modal from './Modal'
+import Modal from '../modals/Modal'
 import NFTsList from './NFTsList'
+import { useAllTokens } from '../../queries'
 
 const NFTListContainer = () => {
   const [modalActive, setModalActive] = useState(false)
   const { data } = useAllTokens()
+  const [elementId, setElementId] = useState(null)
+
+  const dataWithId =
+    data?.map((el) => ({ ...el, id: el.image, desc: el.description })) || []
+
+  const elInModal = dataWithId.find((el) => el.id === elementId)
+
+  const setToggleModal = (id) => {
+    setElementId(id)
+    setModalActive(true)
+  }
+
   return (
     <>
-      <div
-        className="flex flex-wrap w-full"
-        onClick={() => setModalActive(true)}
-      >
-        {data?.map(({ image, name }) => (
-          <NFTsList image={image} name={name} active={modalActive} />
-        ))}
+      <div className="flex flex-wrap w-full">
+        <NFTsList data={dataWithId} setToggleModal={setToggleModal} />
       </div>
       <div>
-        <Modal active={modalActive} setActive={setModalActive} />
+        <Modal active={modalActive} setActive={setModalActive}>
+          <h2>{elInModal?.name}</h2>
+          <p>{elInModal?.description}</p>
+        </Modal>
       </div>
     </>
   )

client/components/NftPage/NFTsList.js

@@ -1,9 +1,19 @@
 import NFTItem from './NFTItem'
 
-const NFTsList = (props) => {
+const NFTsList = ({ data, setToggleModal }) => {
+  const handleItemClick = (identifier) => {
+    return () => {
+      setToggleModal(identifier)
+    }
+  }
+
   return (
     <div>
-      <NFTItem image={props.image} name={props.name} />
+      {data?.map(({ image, name, desc, id }) => (
+        <span onClick={handleItemClick(id)} key={id} className="cursor-pointer">
+          <NFTItem image={image} name={name} desc={desc} />
+        </span>
+      )) || []}
     </div>
   )
 }

client/components/modals/Modal.js

@@ -0,0 +1,25 @@
+const Modal = ({ active, setActive, children }) => {
+  const handleToggleClick = () => {
+    setActive()
+  }
+  const handleStopPropag = (e) => {
+    e.stopPropagation()
+  }
+  return active ? (
+    <div
+      className="h-full w-full bg-black opacity-80 fixed top-0 left-0 flex items-center justify-center"
+      onClick={handleToggleClick}
+    >
+      <div
+        className="p-5 rounded-md bg-white w-auto h-auto opacity-100 text-black"
+        onClick={handleStopPropag}
+      >
+        <div className="flex justify-between" onClick={handleToggleClick}>
+          <div>{children}</div>
+        </div>
+      </div>
+    </div>
+  ) : null
+}
+
+export default Modal