modal card a peaufiner

WildCodeSchool-2023-09 · Nov 6, 2023 · bfb8a35 · bfb8a35
1 parent 7138409
commit bfb8a35
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 16 deletions.
diff --git a/frontend/src/components/Card.jsx b/frontend/src/components/Card.jsx
@@ -12,28 +12,28 @@ function Card({ name, image, effect, ingredients }) {
         visible: { opacity: 1, scale: 1 },
         hidden: { opacity: 0, scale: 0 },
       }}
-      className="container-elixir bg-purple-800 grid text-white w-72 h-96 rounded-2xl p-4"
+      className="container-elixir bg-purple-800 grid text-white w-72 max-sm:w-36 h-96 max-sm:h-auto rounded-2xl p-4 max-sm:p-2"
     >
       <div className="grid bg-purple-heart-400 rounded-xl h-44">
         <h1 className="text-xl font-irish text-center">{name}</h1>
         <div className="flex justify-center">
           {image ? (
             <img
-              className="image-elixir w-36 h-24 object-contain rounded-2xl"
+              className="image-elixir w-36 h-24 object-contain rounded-2xl max-sm:p-2"
               src={image}
               alt={`Elixir: ${name}`}
             />
           ) : (
-            <p className="image-elixir w-36 h-24 text-center self-center">
+            <p className="image-elixir w-36 h-24 text-center self-center max-sm:w-28 ">
               No Image available 😱
             </p>
           )}
         </div>
       </div>
-      <p className="font-extrabold">Effect:</p>
-      <p>{effect || "No effect or unknown"}</p>
-      <p className="font-extrabold">Ingedients</p>
-      <p className="overflow-auto ingredients">
+      <p className="font-extrabold max-sm:hidden">Effect:</p>
+      <p className="max-sm:hidden">{effect || "No effect or unknown"}</p>
+      <p className="font-extrabold max-sm:hidden">Ingedients</p>
+      <p className="overflow-auto ingredients max-sm:hidden">
         {ingredients || "Not known yet"}
       </p>
     </motion.div>

diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
@@ -30,7 +30,7 @@ function Footer() {
         </button>
       </div>
       {openContact && (
-        <div className="blur-background">
+        <div className="blur-background flex items-center justify-center">
           <Contact closeModal={setOpenContact} />
         </div>
       )}

diff --git a/frontend/src/components/Modal/CardModal.jsx b/frontend/src/components/Modal/CardModal.jsx
@@ -0,0 +1,66 @@
+import PropTypes from "prop-types";
+import { motion } from "framer-motion";
+
+function CardModal({ name, image, effect, ingredients, closeModal }) {
+  return (
+    <>
+      <button
+        className="text-[#636262] text-2xl -translate-y-52 translate-x-32 absolute"
+        type="button"
+        onClick={() => closeModal(false)}
+      >
+        <p> X </p>
+      </button>
+      <motion.div
+        initial="hidden"
+        exit="hidden"
+        whileInView="visible"
+        viewport={{ once: true }}
+        variants={{
+          visible: { opacity: 1, scale: 1 },
+          hidden: { opacity: 0, scale: 0 },
+        }}
+        className="container-elixir bg-purple-800 grid text-white w-72 h-96 rounded-2xl p-4"
+      >
+        <div className="grid bg-purple-heart-400 rounded-xl h-44">
+          <h1 className="text-xl font-irish text-center">{name}</h1>
+          <div className="flex justify-center">
+            {image ? (
+              <img
+                className="image-elixir w-36 h-24 object-contain rounded-2xl"
+                src={image}
+                alt={`Elixir: ${name}`}
+              />
+            ) : (
+              <p className="image-elixir w-36 h-24 text-center self-center">
+                No Image available 😱
+              </p>
+            )}
+          </div>
+        </div>
+        <p className="font-extrabold">Effect:</p>
+        <p>{effect || "No effect or unknown"}</p>
+        <p className="font-extrabold">Ingedients</p>
+        <p className="overflow-auto ingredients">
+          {ingredients || "Not known yet"}
+        </p>
+      </motion.div>
+    </>
+  );
+}
+
+CardModal.propTypes = {
+  name: PropTypes.string.isRequired,
+  image: PropTypes.string,
+  effect: PropTypes.string,
+  ingredients: PropTypes.string,
+  closeModal: PropTypes.func.isRequired,
+};
+
+CardModal.defaultProps = {
+  image: "No image available",
+  effect: "No effect",
+  ingredients: "Not known yet",
+};
+
+export default CardModal;
diff --git a/frontend/src/components/OngletElixir.jsx b/frontend/src/components/OngletElixir.jsx
@@ -4,11 +4,14 @@ import { AnimatePresence } from "framer-motion";
 import searchIcon from "../assets/search.svg";
 import Card from "./Card";
 import loadingIcon from "../assets/loading.svg";
+import CardModal from "./Modal/CardModal";
 
 function OngletElixir() {
   const [elixir, setElixir] = useState();
   const [searchValue, setSearchValue] = useState("");
   const [difficulty, setDifficulty] = useState(null);
+  const [openCard, setOpenCard] = useState(false);
+  const [btnIndex, setBtnIndex] = useState();
 
   function handleDifficulty(value) {
     setDifficulty(value);
@@ -86,22 +89,43 @@ function OngletElixir() {
           Hard
         </button>
       </div>
-      <div className="liste-elixir flex flex-wrap gap-10 justify-center">
+      <div className="liste-elixir flex flex-wrap gap-10 max-sm:gap-2 justify-center">
         <AnimatePresence>
           {elixir
             .filter((element) =>
               element.attributes.name.toLowerCase().includes(searchValue)
             )
-            .map((element) => (
-              <Card
+            .map((element, index) => (
+              <button
                 key={element.id}
-                name={element.attributes.name}
-                image={element.attributes.image}
-                effect={element.attributes.effect}
-                ingredients={element.attributes.ingredients}
-              />
+                type="button"
+                onClick={() => {
+                  setOpenCard(true);
+                  setBtnIndex(index);
+                }}
+              >
+                <Card
+                  key={element.id}
+                  name={element.attributes.name}
+                  image={element.attributes.image}
+                  effect={element.attributes.effect}
+                  ingredients={element.attributes.ingredients}
+                />
+              </button>
             ))}
         </AnimatePresence>
+        {openCard && (
+          <div className="blur-background flex items-center justify-center">
+            <CardModal
+              key={elixir[btnIndex].id}
+              name={elixir[btnIndex].attributes.name}
+              image={elixir[btnIndex].attributes.image}
+              effect={elixir[btnIndex].attributes.effect}
+              ingredients={elixir[btnIndex].attributes.ingredients}
+              closeModal={setOpenCard}
+            />
+          </div>
+        )}
       </div>
     </div>
   );