Merge pull request #99 from IT-Academy-BCN/feature/popup-clicked-button

Feature/popup clicked button
IT-Academy-BCN · Nov 6, 2023 · 2543483 · 2543483
2 parents 83d6729 + 50f61bf
commit 2543483
Show file tree

Hide file tree

Showing 8 changed files with 153 additions and 12 deletions.
diff --git a/src/assets/img/new-folder-dynamic-color.png b/src/assets/img/new-folder-dynamic-color.png
diff --git a/src/assets/img/puzzle-dynamic-color.png b/src/assets/img/puzzle-dynamic-color.png
diff --git a/src/assets/img/thumb-up-dynamic-color.png b/src/assets/img/thumb-up-dynamic-color.png
diff --git a/src/components/ButtonCollaborate.tsx b/src/components/ButtonCollaborate.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import selector from '../assets/img/sel_right.png';
+
+const ButtonColloborate: React.FC<{ onClick: () => void }> = ({ onClick }) => (
+  <button
+    className="inline-flex items-center cursor-pointer"
+    onClick={onClick}
+  >
+    <img src={selector}  alt="Icono de selector" style={{width: "20px", height: "20px", marginRight: "0.5rem" }} />
+    ¿Cómo colaborar?
+  </button>
+);
+
+export default ButtonColloborate;
diff --git a/src/components/CardComponentPopupCollaborate.tsx b/src/components/CardComponentPopupCollaborate.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+interface CardComponentPopupCollaborateProps {
+  pos: string;
+  imgSrc1: string; 
+  title: string;
+  description: string;
+}
+
+const CardComponentPopupCollaborate: React.FC<CardComponentPopupCollaborateProps> = ({
+  pos,
+  imgSrc1, 
+  title,
+  description,
+}) => {
+  return (
+    <div className="relative sm:w-1/2 lg:w-1/4 p-3">
+      <svg
+        className="w-full h-full"
+        viewBox="0 0 268 329"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M15.1637 43.8887C5.60393 43.8887 0.000167875 51.1484 0.00016269 59.0682C0.76933 85.6874 1.41757e-06 124.736 0 217.133V308.211C2.7589e-05 321.08 4.94464 329 11.208 329H253.825C261.077 329 268 322.73 268 315.47V14.8495C268 4.61986 262.066 0 252.836 0H58.6766C51.4245 0 45.8205 5.27984 45.8205 12.8696V31.349C45.8205 38.9388 39.887 43.8887 32.6348 43.8887H15.1637Z"
+          fill="#F0F0F0"
+        />
+      </svg>
+      <div className="absolute inset-0 flex flex-col w-full h-full justify-between p-3">
+        <div className="flex items-center h-1/6 pl-1.5">
+          <p className="font-medium text-base text-sm text-gray-600 text-left">
+            {pos}
+          </p>
+        </div>
+        <div className="flex items-center justify-center p-2 h-4/6">
+          <img className="min-h-32 max-h-36 mx-auto mt-2" src={imgSrc1} alt="Logo" />
+        </div>
+        <div className="overflow-hidden">
+          <p className="text-center font-semibold text-2xl text-black ">{title}</p>
+          <p className="font-medium text-sm text-black mb-20">{description}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CardComponentPopupCollaborate;
diff --git a/src/components/CloseButtonCollaborate.tsx b/src/components/CloseButtonCollaborate.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import cross from '../assets/img/cross.png';
+
+interface CloseButtonCollaborateProps {
+  onClick: () => void;
+}
+
+const CloseButtonCollaborate: React.FC<CloseButtonCollaborateProps> = ({ onClick }) => {
+  return (
+    <button className="close-button" onClick={onClick}>
+      <img src={cross} alt="Close" />
+    </button>
+  );
+};
+
+export default CloseButtonCollaborate;
diff --git a/src/components/PopupHowToCollaborate.tsx b/src/components/PopupHowToCollaborate.tsx
@@ -0,0 +1,53 @@
+import cross from "../assets/img/cross.png";
+import folder from "../assets/img/new-folder-dynamic-color.png";
+import puzzle from "../assets/img/puzzle-dynamic-color.png";
+import thumb_up from "../assets/img/thumb-up-dynamic-color.png";
+import CardComponentPopupCollaborate from "./CardComponentPopupCollaborate";
+
+const PopupHowToCollaborate: React.FC<{ onClose: () => void }> = ({ onClose }) => {
+    const closePopup = () => {
+      onClose();
+    };
+
+    return (
+        <div className="bg-black bg-opacity-50 fixed inset-0 flex items-center justify-center z-50">
+        <div className="bg-white flex-col border-2 rounded-xl top-40 font-black bg-opacity-80 fixed z-50 container mx-auto">
+             <div className="p-3 flex">
+                <img
+                    src={cross}
+                    className="cursor-pointer w-3 ml-auto absolute top-3 right-3" 
+                    alt="button_close"
+                    onClick={closePopup} 
+                />
+            </div>
+            <h1 className="bg-white text-3xl text-black font-bold mt-14 mb-10">
+                ¿Cómo coloborar en proyectos IT Academy?
+            </h1>
+            <div className="flex z-50 rounded-xl bg-white flex-wrap items-center justify-center bg-opacity-80 mb-24">
+                <CardComponentPopupCollaborate
+                    pos={"01"}
+                    imgSrc1={folder}
+                    title="Pregunta a tu mentor"
+                    description="Resolvera todas tus dudas y te ayudara con setup del proyecto"
+                />
+
+                <CardComponentPopupCollaborate
+                    pos={"02"}
+                    imgSrc1={puzzle}
+                    title="Unete al equipo"
+                    description="Tu mentor de proyecto te ayudará"
+                />
+
+                <CardComponentPopupCollaborate
+                    pos={"03"}
+                    imgSrc1={thumb_up}
+                    title="Entrega tu funcionalidades"
+                    description="Una vez realices tu tareas"
+                />
+            </div>
+        </div>
+    </div>
+    );
+};
+
+export default PopupHowToCollaborate;
diff --git a/src/components/SloganComponent.tsx b/src/components/SloganComponent.tsx
@@ -1,3 +1,6 @@
+import { useState } from 'react';
+import PopupHowToCollaborate from "./PopupHowToCollaborate";
+import ButtonCollaborate from './ButtonCollaborate';
 import angularLogo from "../assets/img/angular.png";
 import phpLogo from "../assets/img/php.png";
 import javaLogo from "../assets/img/java.png";
@@ -8,10 +11,19 @@ import nodejsLogo from "../assets/img/nodejs.png";
 import gitLogo from "../assets/img/git.png";
 import itacademyLogo from "../assets/img/itacademylogo.png";
 import HeaderComponent from "./HeaderComponent";
-import selector from "../assets/img/sel_right.png";
 
-const SloganComponent = () => (
-  <>
+const SloganComponent = () => {
+  const [isPopupOpen, setIsPopupOpen] = useState(false); 
+
+  const openPopup = () => {
+    setIsPopupOpen(true);
+  };
+  const closePopup = () => {
+    setIsPopupOpen(false);
+  };
+
+  return (
+    <>
     <div className="relative flex justify-center m-auto background-image-style mt-5 ">
       <HeaderComponent />
 
@@ -36,18 +48,16 @@ const SloganComponent = () => (
             </div>
           </div>
 
-          <div className="mt-16      ">
+          <div className="mt-16">
             <div className="w-96 md:w-full lg:w-3/4">
               <div className="text-start ">
                 {/*<img className="absolute mr-[18px]" src="{{ asset('img/Ellipse.png') }}" alt=""></img>
                             <img className="absolute  ml-2 mr-[18px]" src="{{ asset('img/Vector.png') }}" alt=""></img>*/}
                 <div className="font-black">
-                  <p className="flex items-center justify-start">
-                  <span className="inline-flex items-center cursor-pointer space-x-6">
-                 <img src={selector} className="h-6 w-6 mr-2" alt="Icono de selector" />
-                 </span>
-                  ¿Cómo colaborar?
-                </p>
+                  <p className="cursor-pointer flex items-center justify-start"
+                  onClick={() => setIsPopupOpen(true)}>
+                  <ButtonCollaborate onClick={openPopup} />
+                  </p>
               </div>
               </div>
               <div className="mt-7">
@@ -121,7 +131,8 @@ const SloganComponent = () => (
         </div>
       </div>
     </div>
+    {isPopupOpen && <PopupHowToCollaborate onClose={closePopup} />} 
   </>
 );
-
-export default SloganComponent;
+};
+export default SloganComponent;