diff --git a/src/app/earthquakes/page.tsx b/src/app/earthquakes/page.tsx index 404789e..5a24479 100644 --- a/src/app/earthquakes/page.tsx +++ b/src/app/earthquakes/page.tsx @@ -1,7 +1,7 @@ "use client"; -import Sidebar from "@components/Sidebar"; -import Map from "@/components/Map"; +import Sidebar from "@/components/sidebar"; +import Map from "@/components/map"; import { useState, useMemo } from "react"; export default function Earthquakes() { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 44b6d34..41aa420 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,5 @@ import type { Metadata } from "next"; -import Navbar from "@components/navbar"; +import Navbar from "@/components/navbar"; import { Inter } from "next/font/google"; import "./globals.css"; diff --git a/src/app/observatories/page.tsx b/src/app/observatories/page.tsx index af96f8f..5e4dd6a 100644 --- a/src/app/observatories/page.tsx +++ b/src/app/observatories/page.tsx @@ -1,7 +1,7 @@ "use client"; -import Sidebar from "@components/Sidebar"; -import Map from "@/components/Map"; +import Sidebar from "@/components/sidebar"; +import Map from "@/components/map"; import { useState, useMemo } from "react"; export default function Observatories() { diff --git a/src/app/our-mission/page.tsx b/src/app/our-mission/page.tsx index a953615..787f395 100644 --- a/src/app/our-mission/page.tsx +++ b/src/app/our-mission/page.tsx @@ -1,5 +1,6 @@ "use client"; -export default function Page(){ +export default function Page() +{ return(

Our mission

) } \ No newline at end of file diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx index 98fd4cc..d7726fe 100644 --- a/src/app/shop/page.tsx +++ b/src/app/shop/page.tsx @@ -1,7 +1,121 @@ -export default function Shop() { +"use client"; +import Sidebar from "@/components/sidebar"; +import { useState } from "react"; + +// Artifacts Data +const artifacts = [ + { id: 1, name: "Golden Scarab", description: "An ancient Egyptian artifact symbolizing rebirth.", location: "Cairo, Egypt", image: "/images/artifact1.jpg", price: 150 }, + { id: 2, name: "Aztec Sunstone", description: "A replica of the Aztec calendar (inscriptions intact).", location: "Peru", image: "/images/artifact2.jpg", price: 200 }, + { 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: 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 }, + { id: 10, name: "Victorian Brooch", description: "A beautiful Victorian-era brooch with a ruby centre.", location: "Oxford, England", image: "/images/artifact10.jpg", price: 150 }, + { id: 11, name: "Ancient Scroll", description: "A mysterious scroll from ancient times.", location: "Madrid, Spain", image: "/images/artifact11.jpg", price: 500 }, + { 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 }, +]; + +// ArtifactCard Component +const ArtifactCard = ({ artifact }) => { + const [selectedCurrency, setSelectedCurrency] = useState("USD"); + const conversionRates = { USD: 1, EUR: 0.94, GBP: 0.81 }; + const convertPrice = (price, currency) => (price * conversionRates[currency]).toFixed(2); + return ( -
-

Shop

+
+ {artifact.name} +
+

{artifact.name}

+

{artifact.description}

+

{artifact.location}

+
+

+ {selectedCurrency}: {convertPrice(artifact.price, selectedCurrency)} +

+ +
+
); -} +}; + +// Shop Component +export default function Shop() { + const [currentPage, setCurrentPage] = useState(1); + const artifactsPerPage = 6; + + const indexOfLastArtifact = currentPage * artifactsPerPage; + const indexOfFirstArtifact = indexOfLastArtifact - artifactsPerPage; + const currentArtifacts = artifacts.slice(indexOfFirstArtifact, indexOfLastArtifact); + + const handleNextPage = () => { + if (indexOfLastArtifact < artifacts.length) setCurrentPage((prev) => prev + 1); + }; + + const handlePreviousPage = () => { + if (currentPage > 1) setCurrentPage((prev) => prev - 1); + }; + + return ( +
+ {/* Artifact Grid */} +
+ {currentArtifacts.map((artifact) => ( + + ))} +
+ + {/* Footer Fixed at Bottom */} +
+ + +
+ + {/* Sidebar Positioned Against the Right Edge */} + +
+ ); +} \ No newline at end of file diff --git a/src/app/the-team/page.tsx b/src/app/the-team/page.tsx index edbfda1..7f3835a 100644 --- a/src/app/the-team/page.tsx +++ b/src/app/the-team/page.tsx @@ -1,5 +1,6 @@ "use client"; -export default function Page(){ +export default function Page() +{ return(

The Team

) } \ No newline at end of file