diff --git a/SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx b/SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx index 2951956a..0c6aa8aa 100644 --- a/SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx +++ b/SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx @@ -11,6 +11,7 @@ import { } from "react-icons/fa" import SearchBox from "../Search/SearchBox" import PopUp from "../PopUp/PopUp" +import DeckInfoPopUp from "../PopUp/DeckInfoPopUp" const deckTypes = [ { label: "Luck", color: "var(--color-luck)" }, @@ -77,6 +78,7 @@ const DeckManager = () => { const [sortBy, setSortBy] = useState("date-desc") const [search, setSearch] = useState("") const [showSortHelp, setShowSortHelp] = useState(false) + const [selectedDeck, setSelectedDeck] = useState(null) // Filter logic (mock) let filteredDecks = mockDecks.filter((deck) => { @@ -254,8 +256,9 @@ const DeckManager = () => { return (
setSelectedDeck(deck)} >
{ })}
+ + {/* Deck Info Popup */} + {selectedDeck && ( + setSelectedDeck(null)} + /> + )} ) } diff --git a/SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx b/SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx new file mode 100644 index 00000000..1b895407 --- /dev/null +++ b/SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx @@ -0,0 +1,208 @@ +import React, { useEffect } from "react" +import { + FaUser, + FaLock, + FaGlobe, + FaTags, + FaCalendarAlt, + FaQuestionCircle, + FaComment, + FaTimes, + FaEdit +} from "react-icons/fa" + +export default function DeckInfoPopUp({ deck, onClose }) { + if (!deck) return null + + // Scroll blokkolás amikor a popup nyitva van + useEffect(() => { + // Scroll letiltása + document.body.style.overflow = 'hidden' + + // Cleanup function - scroll visszaállítása amikor a komponens unmount-ol + return () => { + document.body.style.overflow = 'unset' + } + }, []) + + const deckTypes = { + "Luck": { label: "Szerencse", color: "var(--color-luck)" }, + "Question": { label: "Kérdés", color: "var(--color-question)" }, + "Fun": { label: "Szórakozás", color: "var(--color-fun)" } + } + + const currentDeckType = deckTypes[deck.type] || { label: deck.type, color: "var(--color-success)" } + + // Mock data - ezeket majd a backend adatokra cseréljük + const mockData = { + creator: "John Doe", + privacy: deck.origin === "Vállalati" ? "Publikus" : "Privát", + questionsCount: Math.floor(Math.random() * 50) + 10, + answersCount: Math.floor(Math.random() * 200) + 50, + ...deck + } + + const formatDate = (dateString) => { + const date = new Date(dateString) + return date.toLocaleDateString('hu-HU', { + year: 'numeric', + month: 'long', + day: 'numeric' + }) + } + + const handleOpenDeck = () => { + alert("⚠️ A pakli megnyitás funkció még fejlesztés alatt áll!") + } + + const handleEditDeck = () => { + alert("⚠️ A pakli szerkesztés funkció még fejlesztés alatt áll!") + } + + return ( +
+
+ {/* Header with deck type color */} +
+ + {/* Close button */} + + +
+ {/* Deck name and type */} +
+
+

+ {mockData.name} +

+ + {currentDeckType.label} + +
+
+ + {/* Data grid */} +
+ {/* Creator */} +
+
+ +
+
+
Létrehozó
+
{mockData.creator}
+
+
+ + {/* Privacy */} +
+
+ {mockData.privacy === "Privát" ? ( + + ) : ( + + )} +
+
+
Láthatóság
+
{mockData.privacy}
+
+
+ + {/* Type */} +
+
+ +
+
+
Típus
+
{currentDeckType.label}
+
+
+ + {/* Date */} +
+
+ +
+
+
Létrehozás dátuma
+
{formatDate(mockData.created)}
+
+
+ + {/* Questions and Answers in one row */} +
+ {/* Questions */} +
+
+ +
+
+
Kérdések
+
{mockData.questionsCount}
+
+
+ + {/* Answers */} +
+
+ +
+
+
Válaszok
+
{mockData.answersCount}
+
+
+
+
+ + {/* Action buttons */} +
+
+ {/* Open button */} + + + {/* Edit button */} + +
+
+
+
+
+ ) +} \ No newline at end of file