SerpentRace_Frontend/src/components/PopUp/PopUp.jsx

@@ -0,0 +1,21 @@
+// src/components/PopUp/PopUp.jsx
+// sima komponens, ami megjeleníti a popupot
+
+import React from "react";
+
+export default function PopUp({ children, onClose }) {
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
+      <div className="bg-white rounded-xl shadow-lg p-8 min-w-[300px] relative">
+        <button
+          onClick={onClose}
+          className="absolute top-2 right-2 text-gray-500 hover:text-black text-xl font-bold leading-none"
+          aria-label="Close"
+        >
+          ×
+        </button>
+        {children}
+      </div>
+    </div>
+  );
+}

SerpentRace_Frontend/src/pages/Testing/Test.jsx

@@ -1,27 +1,55 @@
+// src/pages/Testing/Test.jsx
+// itt tesztelhetjük a komponenseket illetve bármit
+
 import { useState } from "react";
 import Button from "../../components/Buttons/Button";
 import InputBox from "../../components/Inputs/InputBox";
+import PopUp from "../../components/PopUp/PopUp";
+import Logo from "../../assets/pictures/Logo.jsx";
 
 export default function Test() {
+  const [showPopup, setShowPopup] = useState(false);
+  const [inputValue, setInputValue] = useState(""); // input értékének tárolása
 
   return (
-    <div className="w-full h-screen flex flex-col items-center justify-center">
+    <div className="w-full h-screen flex flex-col items-center justify-center space-y-6">
       <InputBox
-        placeholder="Input"
+        placeholder="E-mail cím"
         type="text"
         width="w-1/2"
-        onChange={(e) => {
-          console.log(value);
-        }}
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
       />
       <Button
-        text="Button"
+        text="Regisztráció"
         type="button"
         width="w-1/2"
-        onClick={() => {
-          console.log("Button clicked");
-        }}
+        onClick={() => setShowPopup(true)}
       />
+      {showPopup && (
+        <PopUp onClose={() => setShowPopup(false)}>
+          <div className="flex flex-col items-center space-y-4">
+            {/* <Logo size={120} /> */}
+            <h1 className="text-2xl font-bold text-center">
+              Sikeres regisztráció!
+            </h1>
+            <p className="text-center text-gray-600">
+              Kérjük, erősítsd meg az e-mail címedet!<br />
+              Egy megerősítő linket küldtünk az általad megadott e-mail címre
+              <span className="font-semibold text-black"> {inputValue}</span>.
+            </p>
+            <p className="text-center text-sm text-gray-500">
+              Ha nem kaptad meg a levelet, ellenőrizd a spam mappádat is!
+            </p>
+            <Button
+              text="Bezár"
+              type="button"
+              width="w-24"
+              onClick={() => setShowPopup(false)}
+            />
+          </div>
+        </PopUp>
+      )}
     </div>
   );
 }