[#103] previewhttps://project.mdnd-it.cc/work_packages/103

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 (
               <div
                 key={deck.id}
-                className="flex flex-col justify-between h-48 bg-[color:var(--color-card)] rounded-2xl p-6 shadow-lg border-t-4 hover:scale-105 transition-transform duration-200"
+                className="flex flex-col justify-between h-48 bg-[color:var(--color-card)] rounded-2xl p-6 shadow-lg border-t-4 hover:scale-105 transition-transform duration-200 cursor-pointer"
                 style={{ borderTopColor: borderColor }}
+                onClick={() => setSelectedDeck(deck)}
               >
                 <div>
                   <span
@@ -285,6 +288,14 @@ const DeckManager = () => {
           })}
         </div>
       </div>
+      
+      {/* Deck Info Popup */}
+      {selectedDeck && (
+        <DeckInfoPopUp 
+          deck={selectedDeck} 
+          onClose={() => setSelectedDeck(null)} 
+        />
+      )}
     </div>
   )
 }