From 3b621a05cedac07f325f15a9d2f07ee2b4a4cb00 Mon Sep 17 00:00:00 2001
From: Emily Neighbour <emily.neighbour@dyson.com>
Date: Mon, 14 Apr 2025 13:50:13 +0100
Subject: [PATCH] shop modal pop-ups

---
 src/app/shop/page.tsx | 166 +++++++++++++++++++++++++++++-------------
 1 file changed, 115 insertions(+), 51 deletions(-)

diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index d7726fe..1626553 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -9,7 +9,7 @@ const artifacts = [
   { id: 3, name: "Medieval Chalice", description: "Used by royalty in medieval ceremonies.", location: "Cambridge, England", image: "/images/artifact3.jpg", price: 120 },
   { id: 4, name: "Roman Coin", description: "An authentic Roman coin from the 2nd century CE.", location: "Rome, Italy", image: "/images/artifact4.jpg", price: 80 },
   { id: 5, name: "Samurai Mask", description: "Replica of Japanese Samurai battle masks.", location: "Tokyo, Japan", image: "/images/artifact5.jpg", price: 300 },
-  { id: 6, name: "Ancient Greek Vase", description: "Depicts Greek mythology.", location: "Athens, Greece", image: "/images/artifact6.jpg", price: 250 },
+  { id: 6, name: "Ancient Greek Vase", description: "Depicts Greek mythology, found in the Acropolis.", location: "Athens, Greece", image: "/images/artifact6.jpg", price: 250 },
   { id: 7, name: "Incan Pendant", description: "Represents the Sun God Inti.", location: "India", image: "/images/artifact7.jpg", price: 175 },
   { id: 8, name: "Persian Carpet Fragment", description: "Ancient Persian artistry.", location: "Petra, Jordan", image: "/images/artifact8.jpg", price: 400 },
   { id: 9, name: "Stone Buddha", description: "Authentic stone Buddha carving.", location: "India", image: "/images/artifact9.jpg", price: 220 },
@@ -18,36 +18,84 @@ const artifacts = [
   { id: 12, name: "Ming Dynasty Porcelain", description: "Porcelain from China's Ming Dynasty.", location: "Beijing, China", image: "/images/artifact12.jpg", price: 300 },
   { id: 13, name: "African Tribal Mask", description: "A unique tribal mask from Africa.", location: "Nigeria", image: "/images/artifact13.jpg", price: 250 },
   { id: 14, name: "Crystal Skull", description: "A mystical pre-Columbian artifact.", location: "Colombia", image: "/images/artifact14.jpg", price: 1000 },
-  { id: 15, name: "Medieval Armor Fragment", description: "A fragment of medieval knight's armor.", location: "Normandy, France", image: "/images/artifact15.jpg", price: 400 },
+  { id: 15, name: "Medieval Armor Fragment", description: "A fragment of medieval armor.", location: "Normandy, France", image: "/images/artifact15.jpg", price: 400 },
 ];
 
+// Modal Component
+const Modal = ({ artifact, onClose }) => {
+  if (!artifact) return null;
+
+  const handleOverlayClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 bg-gray-900 bg-opacity-50 flex justify-center items-center z-50"
+      onClick={handleOverlayClick}>
+      <div className="bg-white rounded-md shadow-lg max-w-lg w-full p-6">
+        <h3 className="text-xl font-bold mb-4">{artifact.name}</h3>
+        <img src={artifact.image} alt={artifact.name} className="w-full h-64 object-cover rounded-md mb-4" />
+        <p className="text-gray-600 mb-2">{artifact.description}</p>
+        <p className="text-gray-500 font-bold mb-4">Location: {artifact.location}</p>
+        <p className="text-red-600 font-bold">Price: ${artifact.price}</p>
+        <div className="flex justify-end gap-4 mt-6">
+          <button
+            onClick={() => alert("Reserved Successfully!")}
+            className="px-4 py-2 bg-yellow-500 text-white rounded-md hover:bg-yellow-400">
+            Reserve
+          </button>
+          <button
+            onClick={() => alert("Purchased Successfully!")}
+            className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-500">
+            Buy
+          </button>
+          <button
+            onClick={onClose}
+            className="px-4 py-2 bg-gray-300 rounded-md hover:bg-gray-400">
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 // ArtifactCard Component
-const ArtifactCard = ({ artifact }) => {
+const ArtifactCard = ({ artifact, onSelect }) => {
   const [selectedCurrency, setSelectedCurrency] = useState("USD");
   const conversionRates = { USD: 1, EUR: 0.94, GBP: 0.81 };
   const convertPrice = (price, currency) => (price * conversionRates[currency]).toFixed(2);
+  const handleCurrencyChange = (e) => {
+    setSelectedCurrency(e.target.value); // Update selected currency
+    e.stopPropagation(); // Prevent the modal from opening on dropdown click
+  };
 
   return (
-    <div className="flex flex-col bg-white shadow-md rounded-md overflow-hidden">
+    <div
+      className="flex flex-col bg-white shadow-md rounded-md overflow-hidden cursor-pointer hover:scale-105 transition-transform"
+      onClick={() => onSelect(artifact)} // Opens modal
+      >
       <img src={artifact.image} alt={artifact.name} className="w-full h-56 object-cover" />
       <div className="p-4">
         <h3 className="text-lg font-bold">{artifact.name}</h3>
         <p className="text-gray-700 mb-2">{artifact.description}</p>
         <p className="text-gray-500 mb-2">{artifact.location}</p>
-        <div className="flex items-center justify-between mt-4">
-          <p className="text-red-600 font-bold text-lg">
-            {selectedCurrency}: {convertPrice(artifact.price, selectedCurrency)}
-          </p>
-          <select
-            value={selectedCurrency}
-            onChange={(e) => setSelectedCurrency(e.target.value)}
-            className="border border-gray-300 rounded-md px-3 py-2 text-sm"
+        <p className="text-red-600 font-bold text-md mt-4">
+          {selectedCurrency}: {convertPrice(artifact.price, selectedCurrency)}
+        </p>
+        <select
+          value={selectedCurrency}
+          onChange={handleCurrencyChange} // Handles currency change
+          className="border border-gray-300 rounded-lg px-3 py-1 text-sm items-left"
+          onClick={(e) => e.stopPropagation()} // Prevents triggering the modal
           >
-            <option value="USD">USD ($)</option>
-            <option value="EUR">EUR (€)</option>
-            <option value="GBP">GBP (£)</option>
-          </select>
-        </div>
+          <option value="USD">USD ($)</option>
+          <option value="EUR">EUR (€)</option>
+          <option value="GBP">GBP (£)</option>
+        </select>
       </div>
     </div>
   );
@@ -56,66 +104,82 @@ const ArtifactCard = ({ artifact }) => {
 // Shop Component
 export default function Shop() {
   const [currentPage, setCurrentPage] = useState(1);
-  const artifactsPerPage = 6;
-
+  const [selectedArtifact, setSelectedArtifact] = useState(null); // Track selected artifact for modal
+  const artifactsPerPage = 9; // Number of artifacts per page
   const indexOfLastArtifact = currentPage * artifactsPerPage;
   const indexOfFirstArtifact = indexOfLastArtifact - artifactsPerPage;
   const currentArtifacts = artifacts.slice(indexOfFirstArtifact, indexOfLastArtifact);
 
   const handleNextPage = () => {
-    if (indexOfLastArtifact < artifacts.length) setCurrentPage((prev) => prev + 1);
+    if (indexOfLastArtifact < artifacts.length) {
+      setCurrentPage((prev) => prev + 1);
+    }
   };
 
   const handlePreviousPage = () => {
-    if (currentPage > 1) setCurrentPage((prev) => prev - 1);
+    if (currentPage > 1) {
+      setCurrentPage((prev) => prev - 1);
+    }
+  };
+
+  const handleSelectArtifact = (artifact) => {
+    setSelectedArtifact(artifact); // Open modal with selected artifact
+  };
+
+  const handleCloseModal = () => {
+    setSelectedArtifact(null); // Close modal
   };
 
   return (
-    <div className="relative bg-gray-100 min-h-screen flex">
-      {/* Artifact Grid */}
-      <div className="flex-grow grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6 max-w-[calc(100%-18rem)]">
-        {currentArtifacts.map((artifact) => (
-          <ArtifactCard key={artifact.id} artifact={artifact} />
-        ))}
+    <div className="flex flex-col min-h-screen bg-gray-100">
+      {/* Main Content */}
+      <div className="flex flex-1">
+        {/* Artifact Grid */}
+        <div className="flex-grow grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6 pr-72">
+          {currentArtifacts.map((artifact) => (
+            <ArtifactCard key={artifact.id} artifact={artifact} onSelect={handleSelectArtifact} />
+          ))}
+        </div>
+
+        {/* Sidebar */}
+        <aside className="w-72 bg-white shadow-lg p-4 h-screen fixed top-10 right-0 overflow-auto">
+          <Sidebar
+            logTitle="Artifact Collection"
+            logSubtitle="Record new artifacts - name, description, image, location and price"
+            recentsTitle="Recent Updates"
+            events={[/* example events if needed */]}
+            selectedEventId=""
+            setSelectedEventId={() => {}}
+            hoveredEventId=""
+            setHoveredEventId={() => {}}
+            button1Name="Add New Artifact"
+            button2Name="Search Artifacts"
+          />
+        </aside>
       </div>
 
-      {/* Footer Fixed at Bottom */}
-      <footer className="fixed bottom-0 left-0 bg-white border-t border-gray-300 w-[calc(100%-18rem)] py-4 text-center flex justify-center items-center">
+      {/* Pagination Footer */}
+      <footer className="bg-white border-t border-gray-300 py-2 text-center w-full flex justify-center items-centre">
         <button
           onClick={handlePreviousPage}
           disabled={currentPage === 1}
-          className={`mx-2 px-4 py-2 bg-blue-500 text-white rounded-md font-bold shadow-md ${
+          className={`mx-2 px-4 py-1 bg-blue-700 text-white rounded-md font-bold shadow-md ${
             currentPage === 1 ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-600"
-          }`}
-        >
+          }`} >
           &larr; Previous
         </button>
         <button
           onClick={handleNextPage}
           disabled={indexOfLastArtifact >= artifacts.length}
-          className={`mx-2 px-4 py-2 bg-blue-500 text-white rounded-md font-bold shadow-md ${
+          className={`mx-2 px-4 py-1 bg-blue-500 text-white rounded-md font-bold shadow-md ${
             indexOfLastArtifact >= artifacts.length ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-600"
-          }`}
-        >
+          }`} >
           Next &rarr;
         </button>
       </footer>
 
-      {/* Sidebar Positioned Against the Right Edge */}
-      <aside className="w-72 bg-white shadow-lg p-4 fixed top-10 right-0 h-full">
-        <Sidebar
-          logTitle="Shop Artifacts"
-          logSubtitle="Record new artifacts - name, description, image, location and price"
-          recentsTitle="Recent Updates"
-          events={[/* example events if needed */]}
-          selectedEventId=""
-          setSelectedEventId={() => {}}
-          hoveredEventId=""
-          setHoveredEventId={() => {}}
-          button1Name="Add New Artifact"
-          button2Name="Search Artifacts"
-        />
-      </aside>
+      {/* Modal */}
+      <Modal artifact={selectedArtifact} onClose={handleCloseModal} />
     </div>
   );
-}
\ No newline at end of file
+}