thowitz-work/tremor-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

shop extras

Browse Source
This commit is contained in:
Emily Neighbour 2025-05-12 21:38:46 +01:00
parent 52f17d5a00
commit 579c1c205a
2 changed files with 194 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/app/shop/page.tsx
View File

@ -1,10 +1,10 @@
"use client"; "use client";
import Image from 'next/image'; import Image from "next/image";
import { Dispatch, SetStateAction, useCallback, useState } from 'react'; import { Dispatch, SetStateAction, useCallback, useState } from "react";
import Artifact from '@appTypes/Artifact'; import Artifact from "@appTypes/Artifact";
import { Currency } from '@appTypes/StoreModel'; import { Currency } from "@appTypes/StoreModel";
import { useStoreState } from '@hooks/store'; import { useStoreState } from "@hooks/store";
// Artifacts Data // Artifacts Data
const artifacts: Artifact[] = [ const artifacts: Artifact[] = [
@ -13,6 +13,9 @@ const artifacts: Artifact[] = [
name: "Golden Scarab", name: "Golden Scarab",
description: "An ancient Egyptian artifact symbolizing rebirth.", description: "An ancient Egyptian artifact symbolizing rebirth.",
location: "Cairo, Egypt", location: "Cairo, Egypt",
earthquakeID: "h",
observatory: "jhd",
dateReleased: "12/02/2025",
image: "/artifact1.jpg", image: "/artifact1.jpg",
price: 150, price: 150,
}, },
@ -21,6 +24,9 @@ const artifacts: Artifact[] = [
name: "Aztec Sunstone", name: "Aztec Sunstone",
description: "A replica of the Aztec calendar (inscriptions intact).", description: "A replica of the Aztec calendar (inscriptions intact).",
location: "Peru", location: "Peru",
earthquakeID: "h",
observatory: "jhd",
dateReleased: "12/02/2025",
image: "/artifact2.jpg", image: "/artifact2.jpg",
price: 200, price: 200,
}, },
@ -29,6 +35,9 @@ const artifacts: Artifact[] = [
name: "Medieval Chalice", name: "Medieval Chalice",
description: "Used by royalty in medieval ceremonies.", description: "Used by royalty in medieval ceremonies.",
location: "Cambridge, England", location: "Cambridge, England",
earthquakeID: "h",
observatory: "jhd",
dateReleased: "12/02/2025",
image: "/artifact3.jpg", image: "/artifact3.jpg",
price: 120, price: 120,
}, },
@ -37,6 +46,9 @@ const artifacts: Artifact[] = [
name: "Roman Coin", name: "Roman Coin",
description: "An authentic Roman coin from the 2nd century CE.", description: "An authentic Roman coin from the 2nd century CE.",
location: "Rome, Italy", location: "Rome, Italy",
earthquakeID: "h",
observatory: "jhd",
dateReleased: "12/02/2025",
image: "/artifact4.jpg", image: "/artifact4.jpg",
price: 80, price: 80,
}, },
@ -45,6 +57,9 @@ const artifacts: Artifact[] = [
name: "Samurai Mask", name: "Samurai Mask",
description: "Replica of Japanese Samurai battle masks.", description: "Replica of Japanese Samurai battle masks.",
location: "Tokyo, Japan", location: "Tokyo, Japan",
earthquakeID: "h",
observatory: "jhd",
dateReleased: "12/02/2025",
image: "/artifact5.jpg", image: "/artifact5.jpg",
price: 300, price: 300,
}, },
@ -53,6 +68,9 @@ const artifacts: Artifact[] = [
name: "Ancient Greek Vase", name: "Ancient Greek Vase",
description: "Depicts Greek mythology, found in the Acropolis.", description: "Depicts Greek mythology, found in the Acropolis.",
location: "Athens, Greece", location: "Athens, Greece",
earthquakeID: "h",
observatory: "jhd",
dateReleased: "12/02/2025",
image: "/artifact6.jpg", image: "/artifact6.jpg",
price: 250, price: 250,
}, },
@ -61,6 +79,9 @@ const artifacts: Artifact[] = [
name: "Incan Pendant", name: "Incan Pendant",
description: "Represents the Sun God Inti.", description: "Represents the Sun God Inti.",
location: "India", location: "India",
earthquakeID: "h",
observatory: "jhd",
dateReleased: "12/02/2025",
image: "/artifact7.jpg", image: "/artifact7.jpg",
price: 175, price: 175,
}, },
@ -69,6 +90,9 @@ const artifacts: Artifact[] = [
name: "Persian Carpet Fragment", name: "Persian Carpet Fragment",
description: "Ancient Persian artistry.", description: "Ancient Persian artistry.",
location: "Petra, Jordan", location: "Petra, Jordan",
earthquakeID: "h",
observatory: "jhd",
dateReleased: "12/02/2025",
image: "/artifact8.jpg", image: "/artifact8.jpg",
price: 400, price: 400,
}, },
@ -77,6 +101,9 @@ const artifacts: Artifact[] = [
name: "Stone Buddha", name: "Stone Buddha",
description: "Authentic stone Buddha carving.", description: "Authentic stone Buddha carving.",
location: "India", location: "India",
earthquakeID: "h",
observatory: "jhd",
dateReleased: "12/02/2025",
image: "/artifact9.jpg", image: "/artifact9.jpg",
price: 220, price: 220,
}, },
@ -85,6 +112,9 @@ const artifacts: Artifact[] = [
name: "Victorian Brooch", name: "Victorian Brooch",
description: "A beautiful Victorian-era brooch with a ruby centre.", description: "A beautiful Victorian-era brooch with a ruby centre.",
location: "Oxford, England", location: "Oxford, England",
earthquakeID: "h",
observatory: "jhd",
dateReleased: "12/02/2025",
image: "/artifact10.jpg", image: "/artifact10.jpg",
price: 150, price: 150,
}, },
@ -93,6 +123,9 @@ const artifacts: Artifact[] = [
name: "Ancient Scroll", name: "Ancient Scroll",
description: "A mysterious scroll from ancient times.", description: "A mysterious scroll from ancient times.",
location: "Madrid, Spain", location: "Madrid, Spain",
earthquakeID: "h",
observatory: "jhd",
dateReleased: "12/02/2025",
image: "/artifact11.jpg", image: "/artifact11.jpg",
price: 500, price: 500,
}, },
@ -101,6 +134,9 @@ const artifacts: Artifact[] = [
name: "Ming Dynasty Porcelain", name: "Ming Dynasty Porcelain",
description: "Porcelain from China's Ming Dynasty.", description: "Porcelain from China's Ming Dynasty.",
location: "Beijing, China", location: "Beijing, China",
earthquakeID: "h",
observatory: "jhd",
dateReleased: "12/02/2025",
image: "/artifact12.jpg", image: "/artifact12.jpg",
price: 300, price: 300,
}, },
@ -109,6 +145,9 @@ const artifacts: Artifact[] = [
name: "African Tribal Mask", name: "African Tribal Mask",
description: "A unique tribal mask from Africa.", description: "A unique tribal mask from Africa.",
location: "Nigeria", location: "Nigeria",
earthquakeID: "h",
observatory: "jhd",
dateReleased: "12/02/2025",
image: "/artifact13.jpg", image: "/artifact13.jpg",
price: 250, price: 250,
}, },
@ -117,6 +156,9 @@ const artifacts: Artifact[] = [
name: "Crystal Skull", name: "Crystal Skull",
description: "A mystical pre-Columbian artifact.", description: "A mystical pre-Columbian artifact.",
location: "Colombia", location: "Colombia",
earthquakeID: "h",
observatory: "jhd",
dateReleased: "12/02/2025",
image: "/artifact14.jpg", image: "/artifact14.jpg",
price: 1000, price: 1000,
}, },
@ -125,6 +167,9 @@ const artifacts: Artifact[] = [
name: "Medieval Armor Fragment", name: "Medieval Armor Fragment",
description: "A fragment of medieval armor.", description: "A fragment of medieval armor.",
location: "Normandy, France", location: "Normandy, France",
earthquakeID: "h",
observatory: "jhd",
dateReleased: "12/02/2025",
image: "/artifact15.jpg", image: "/artifact15.jpg",
price: 400, price: 400,
}, },
@ -133,6 +178,9 @@ const artifacts: Artifact[] = [
name: "Medieval Helmet Fragment", name: "Medieval Helmet Fragment",
description: "A fragment of a medieval helmet.", description: "A fragment of a medieval helmet.",
location: "Normandy, France", location: "Normandy, France",
earthquakeID: "h",
observatory: "jhd",
dateReleased: "12/02/2025",
image: "/artifact16.jpg", image: "/artifact16.jpg",
price: 500, price: 500,
}, },
@ -150,10 +198,7 @@ export default function Shop() {
const conversionRates = useStoreState((state) => state.currency.conversionRates); const conversionRates = useStoreState((state) => state.currency.conversionRates);
const currencyTickers = useStoreState((state) => state.currency.tickers); const currencyTickers = useStoreState((state) => state.currency.tickers);
const convertPrice = useCallback( const convertPrice = useCallback((price: number, currency: Currency) => (price * conversionRates[currency]).toFixed(2), []);
(price: number, currency: Currency) => (price * conversionRates[currency]).toFixed(2),
[]
);
const handleNextPage = () => { const handleNextPage = () => {
if (indexOfLastArtifact < artifacts.length) { if (indexOfLastArtifact < artifacts.length) {
@ -193,6 +238,9 @@ export default function Shop() {
</p> </p>
<p className="text-neutral-600 mt-2">{artifact.description}</p> <p className="text-neutral-600 mt-2">{artifact.description}</p>
<p className="text-neutral-500 font-bold mt-1">Location: {artifact.location}</p> <p className="text-neutral-500 font-bold mt-1">Location: {artifact.location}</p>
<p className="text-neutral-500 mb-2">{artifact.earthquakeID}</p>
<p className="text-neutral-500 mb-2">{artifact.observatory}</p>
<p className="text-neutral-500 mb-2">{artifact.dateReleased}</p>
<div className="flex justify-end gap-4 mt-4 mr-2"> <div className="flex justify-end gap-4 mt-4 mr-2">
<button <button
onClick={() => alert("Purchased Successfully!")} onClick={() => alert("Purchased Successfully!")}
@ -216,6 +264,7 @@ export default function Shop() {
<div className="p-4"> <div className="p-4">
<h3 className="text-lg font-semibold">{artifact.name}</h3> <h3 className="text-lg font-semibold">{artifact.name}</h3>
<p className="text-neutral-500 mb-2">{artifact.location}</p> <p className="text-neutral-500 mb-2">{artifact.location}</p>
<p className="text-neutral-500 mb-2">{artifact.earthquakeID}</p>
<p className="text-black font-bold text-md mt-2"> <p className="text-black font-bold text-md mt-2">
{currencyTickers[selectedCurrency]} {currencyTickers[selectedCurrency]}
{convertPrice(artifact.price, selectedCurrency)} {convertPrice(artifact.price, selectedCurrency)}
@ -230,8 +279,8 @@ export default function Shop() {
className="min-h-screen relative flex flex-col" className="min-h-screen relative flex flex-col"
style={{ style={{
backgroundImage: "url('/artifacts.jpg')", backgroundImage: "url('/artifacts.jpg')",
backgroundSize: 'cover', backgroundSize: "cover",
backgroundPosition: 'center' backgroundPosition: "center",
}} }}
> >
{/* Overlay */} {/* Overlay */}
@ -242,11 +291,14 @@ export default function Shop() {
Artifact Shop Artifact Shop
</h1> </h1>
<p className="text-lg md:text-xl text-center text-white mb-10 drop-shadow-md max-w-2xl"> <p className="text-lg md:text-xl text-center text-white mb-10 drop-shadow-md max-w-2xl">
Discover extraordinary historical artifacts and collectibles from major seismic events from around the world - now available for purchase. Discover extraordinary historical artifacts and collectibles from major seismic events from around the world - now
available for purchase.
</p> </p>
{/* Artifact Grid */} {/* Artifact Grid */}
<div className="w-full max-w-7xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 p-2"> {/* gap-10 for more spacing */} <div className="w-full max-w-7xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 p-2">
{" "}
{/* gap-10 for more spacing */}
{currentArtifacts.map((artifact) => ( {currentArtifacts.map((artifact) => (
<ArtifactCard key={artifact.id} artifact={artifact} /> <ArtifactCard key={artifact.id} artifact={artifact} />
))} ))}

3
src/types/Artifact.ts
View File

@ -4,6 +4,9 @@ interface Artifact {
name: string; name: string;
description: string; description: string;
location: string; location: string;
earthquakeID: string;
observatory: string;
dateReleased: string;
image: string; image: string;
price: number; price: number;
} }