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

3
src/types/Artifact.ts
View File

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