From 370dc9934bd2b7a881dde0148f9975de1cf1b913 Mon Sep 17 00:00:00 2001
From: walkeU <gabooor1982@gmail.com>
Date: Thu, 22 May 2025 11:05:21 +0200
Subject: [PATCH] [#52] pop uphttps://project.mdnd-it.cc/work_packages/52

---
 .../src/components/PopUp/PopUp.jsx            | 18 ++++++++
 .../src/pages/Testing/Test.jsx                | 46 +++++++++++++++----
 2 files changed, 55 insertions(+), 9 deletions(-)
 create mode 100644 SerpentRace_Frontend/src/components/PopUp/PopUp.jsx

diff --git a/SerpentRace_Frontend/src/components/PopUp/PopUp.jsx b/SerpentRace_Frontend/src/components/PopUp/PopUp.jsx
new file mode 100644
index 00000000..cf78fc28
--- /dev/null
+++ b/SerpentRace_Frontend/src/components/PopUp/PopUp.jsx
@@ -0,0 +1,18 @@
+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>
+  );
+}
\ No newline at end of file
diff --git a/SerpentRace_Frontend/src/pages/Testing/Test.jsx b/SerpentRace_Frontend/src/pages/Testing/Test.jsx
index a8a4a53d..8c8312f0 100644
--- a/SerpentRace_Frontend/src/pages/Testing/Test.jsx
+++ b/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>
   );
 }