Add modal window

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "compile-hero.disable-compile-files-on-did-save-code": true
+}

client/components/Modal/Modal.js

@@ -0,0 +1,35 @@
+const Modal = ({ active, setActive, elementInModal }) => {
+  const handleClickStopPropagation = (e) => {
+    e.stopPropagation()
+  }
+  const toggleClickSetActive = () => {
+    setActive(false)
+  }
+
+  return (
+    <div
+      className={`h-full w-full bg-black fixed top-0 left-0 flex items-center justify-center ${
+        active ? `scale-100` : `scale-0`
+      } `}
+      onClick={toggleClickSetActive}
+    >
+      <div
+        className="p-5 rounded-md bg-white w-auto h-auto text-black font-gallery"
+        onClick={handleClickStopPropagation}
+      >
+        <img
+          src={elementInModal?.image}
+          alt={elementInModal?.name}
+          className="rounded-md"
+        />
+        <div className="flex justify-between text-2xl font-semibold">
+          <h2>{elementInModal?.name}</h2>
+          <p>5 деняк</p>
+        </div>
+        <p className="text-xl">{elementInModal?.description}</p>
+      </div>
+    </div>
+  )
+}
+
+export default Modal

client/components/NftPage/NFTItem.js

@@ -1,6 +1,12 @@
-const NFTItem = ({ image, name }) => {
+const NFTItem = ({ image, name, id, handleNftItemClick }) => {
+  const handleOnItemClick = () => {
+    handleNftItemClick(id)
+  }
   return (
-    <div className=" w-96 md:w-auto m-7 rounded-xl box-border overflow-hidden">
+    <div
+      className=" w-96 md:w-auto m-7 rounded-xl box-border overflow-hidden cursor-pointer"
+      onClick={handleOnItemClick}
+    >
       <div className="flex xl:flex-col">
         <div className="md:shrink-0">
           <img

client/components/NftPage/NFTListContainer.js

@@ -1,23 +1,42 @@
 import { useState } from 'react'
 import { useAllTokens } from '../../queries'
-import Modal from './Modal'
+import Modal from '../Modal/Modal'
 import NFTsList from './NFTsList'
 
 const NFTListContainer = () => {
+  const [selectedElement, setSelectedElement] = useState(undefined)
   const [modalActive, setModalActive] = useState(false)
   const { data } = useAllTokens()
+
+  const dataWithId =
+    data?.map((el) => {
+      return {
+        ...el,
+        id: el.image,
+      }
+    }) || []
+
+  const setElementToState = (id) => {
+    const elementInModal = dataWithId.find((elem) => elem.id === id)
+    setSelectedElement(elementInModal)
+    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>
+        <NFTsList
+          dataWithId={dataWithId}
+          id={dataWithId.id}
+          setElementToState={setElementToState}
+        />
       </div>
       <div>
-        <Modal active={modalActive} setActive={setModalActive} />
+        <Modal
+          active={modalActive}
+          setActive={setModalActive}
+          elementInModal={selectedElement}
+        />
       </div>
     </>
   )

client/components/NftPage/NFTsList.js

@@ -1,9 +1,18 @@
 import NFTItem from './NFTItem'
 
-const NFTsList = (props) => {
+const NFTsList = ({ dataWithId, setElementToState }) => {
   return (
-    <div>
-      <NFTItem image={props.image} name={props.name} />
+    <div className="flex flex-wrap w-full">
+      {dataWithId?.map(({ image, name, id }) => (
+        <span>
+          <NFTItem
+            image={image}
+            name={name}
+            id={id}
+            handleNftItemClick={setElementToState}
+          />
+        </span>
+      ))}
     </div>
   )
 }