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

Did lots of cleaning and polishing

Browse Source
This commit is contained in:
Tim Howitz 2025-04-29 16:52:03 +01:00
parent dfd0979547
commit 668b8729a8
5 changed files with 178 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/app/contact-us/page.tsx
View File

@ -1,6 +1,6 @@
"use client"; "use client";
import Image from "next/image"; import Image from 'next/image';
import React, { useState } from "react"; import React, { useState } from 'react';
const ContactUs = () => { const ContactUs = () => {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
@ -9,11 +9,11 @@ const ContactUs = () => {
message: "", message: "",
}); });
const handleChange = (e) => { const handleChange = (e: { target: { name: any; value: any } }) => {
setFormData({ ...formData, [e.target.name]: e.target.value }); setFormData({ ...formData, [e.target.name]: e.target.value });
}; };
const handleSubmit = (e) => { const handleSubmit = (e: { preventDefault: () => void }) => {
e.preventDefault(); e.preventDefault();
console.log("Form submitted with data:", formData); console.log("Form submitted with data:", formData);
alert("Thank you for reaching out! We will get back to you soon."); alert("Thank you for reaching out! We will get back to you soon.");
@ -21,16 +21,22 @@ const ContactUs = () => {
}; };
return ( return (
<div className="h-screen relative text-white py-10 border border-black"> <div className="h-full relative text-white border border-black overflow-hidden">
<Image height={5000} width={5000} alt="Logo" className="border border-neutral-300 absolute z-10" src="/tsunamiWaves.jpg" /> <Image
height={5000}
width={5000}
alt="Logo"
className="border border-neutral-300 absolute z-10 -top-20"
src="/tsunamiWaves.jpg"
/>
{/* Overlay for readability */} {/* Overlay for readability */}
<div className="absolute overflow-hidden w-full h-full bg-black bg-opacity-40 flex flex-col items-center z-20"> <div className="absolute overflow-hidden w-full h-full bg-gradient-to-b from-black/70 via-black/40 to-transparent flex flex-col items-center z-20">
{/* Container */} {/* Container */}
<div className="max-w-4xl mx-auto p-5"> <div className="max-w-4xl mx-auto p-5 mt-20">
{/* Header */} {/* Header */}
<h1 className="text-4xl font-bold text-center text-white mb-6">Contact Us</h1> <h1 className="text-4xl font-bold text-center text-white mb-6">Contact Us</h1>
<p className="text-lg text-center text-neutral-300 mb-6"> <p className="text-lg text-center text-neutral-200 mb-6">
Have questions or concerns about earthquake preparedness? Contact us using the form below or through the provided Have questions or concerns about earthquake preparedness? Contact us using the form below or through the provided
contact details. contact details.
</p> </p>
@ -81,10 +87,11 @@ const ContactUs = () => {
id="message" id="message"
value={formData.message} value={formData.message}
onChange={handleChange} onChange={handleChange}
rows="5" rows={5}
placeholder="Your Message" placeholder="Your Message"
className="w-full p-3 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" className="w-full p-3 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
required required
style={{ resize: "none" }}
/> />
</div> </div>
@ -98,11 +105,13 @@ const ContactUs = () => {
</div> </div>
{/* Contact Details Section */} {/* Contact Details Section */}
<div className="flex-1 bg-white bg-opacity-90 text-neutral-800 rounded-lg shadow-lg p-6"> <div className="w-[45%] bg-white bg-opacity-90 text-neutral-800 rounded-lg shadow-lg p-6">
<h2 className="text-xl font-bold text-neutral-800 mb-4">Get in Touch</h2> <h2 className="text-xl font-bold text-neutral-800 mb-4">Get in Touch</h2>
<div className="mb-4"> <div className="mb-4">
<h3 className="text-neutral-700 font-medium">Email</h3> <h3 className="text-neutral-700 font-medium">Email</h3>
<p className="text-neutral-600">getintouch@tremortracker.org.uk</p> <a href="mailto:getintouch@tremortracker.com" style={{ color: "initial" }}>
getintouch@tremortracker.com
</a>
</div> </div>
<div className="mb-4"> <div className="mb-4">
<h3 className="text-neutral-700 font-medium">Phone</h3> <h3 className="text-neutral-700 font-medium">Phone</h3>
@ -130,9 +139,6 @@ const ContactUs = () => {
<span className="sr-only">LinkedIn</span> <span className="sr-only">LinkedIn</span>
<Image height={200} width={200} alt="Logo" className="z-10" src="/linkedIn.png" /> <Image height={200} width={200} alt="Logo" className="z-10" src="/linkedIn.png" />
</a> </a>
<h3 className="text-l font-bold text-gray-500 mb-2 mt-4">
@tremor.tracker
</h3>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,4 +1,5 @@
"use client"; "use client";
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';
@ -13,7 +14,7 @@ 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",
image: "/images/artifact1.jpg", image: "/artifact1.jpg",
price: 150, price: 150,
}, },
{ {
@ -21,7 +22,7 @@ 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",
image: "/images/artifact2.jpg", image: "/artifact2.jpg",
price: 200, price: 200,
}, },
{ {
@ -29,7 +30,7 @@ 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",
image: "/images/artifact3.jpg", image: "/artifact3.jpg",
price: 120, price: 120,
}, },
{ {
@ -37,7 +38,7 @@ 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",
image: "/images/artifact4.jpg", image: "/artifact4.jpg",
price: 80, price: 80,
}, },
{ {
@ -45,7 +46,7 @@ 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",
image: "/images/artifact5.jpg", image: "/artifact5.jpg",
price: 300, price: 300,
}, },
{ {
@ -53,7 +54,7 @@ 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",
image: "/images/artifact6.jpg", image: "/artifact6.jpg",
price: 250, price: 250,
}, },
{ {
@ -61,7 +62,7 @@ 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",
image: "/images/artifact7.jpg", image: "/artifact7.jpg",
price: 175, price: 175,
}, },
{ {
@ -69,7 +70,7 @@ 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",
image: "/images/artifact8.jpg", image: "/artifact8.jpg",
price: 400, price: 400,
}, },
{ {
@ -77,7 +78,7 @@ const artifacts: Artifact[] = [
name: "Stone Buddha", name: "Stone Buddha",
description: "Authentic stone Buddha carving.", description: "Authentic stone Buddha carving.",
location: "India", location: "India",
image: "/images/artifact9.jpg", image: "/artifact9.jpg",
price: 220, price: 220,
}, },
{ {
@ -85,7 +86,7 @@ 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",
image: "/images/artifact10.jpg", image: "/artifact10.jpg",
price: 150, price: 150,
}, },
{ {
@ -93,7 +94,7 @@ 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",
image: "/images/artifact11.jpg", image: "/artifact11.jpg",
price: 500, price: 500,
}, },
{ {
@ -101,7 +102,7 @@ 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",
image: "/images/artifact12.jpg", image: "/artifact12.jpg",
price: 300, price: 300,
}, },
{ {
@ -109,7 +110,7 @@ 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",
image: "/images/artifact13.jpg", image: "/artifact13.jpg",
price: 250, price: 250,
}, },
{ {
@ -117,7 +118,7 @@ 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",
image: "/images/artifact14.jpg", image: "/artifact14.jpg",
price: 1000, price: 1000,
}, },
{ {
@ -125,7 +126,7 @@ 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",
image: "/images/artifact15.jpg", image: "/artifact15.jpg",
price: 400, price: 400,
}, },
]; ];
@ -171,31 +172,29 @@ export default function Shop() {
className="fixed inset-0 bg-neutral-900 bg-opacity-50 flex justify-center items-center z-50" className="fixed inset-0 bg-neutral-900 bg-opacity-50 flex justify-center items-center z-50"
onClick={handleOverlayClick} onClick={handleOverlayClick}
> >
<div className="bg-white rounded-md shadow-lg max-w-lg w-full p-6"> <div className="bg-white rounded-xl shadow-2xl max-w-lg w-full p-6">
<h3 className="text-xl font-bold mb-4">{artifact.name}</h3> <h3 className="text-2xl 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" /> <Image
<p className="text-neutral-600 mb-2">{artifact.description}</p> height={5000}
<p className="text-neutral-500 font-bold mb-4">Location: {artifact.location}</p> width={5000}
<p className="text-red-600 font-bold">Price: ${artifact.price}</p> src={artifact.image}
<div className="flex justify-end gap-4 mt-6"> alt={artifact.name}
<button className="w-full h-64 object-cover rounded-md"
onClick={() => alert("Reserved Successfully!")} ></Image>
className="px-4 py-2 bg-yellow-500 text-white rounded-md hover:bg-yellow-400" <p className="text-xl font-bold">
> {currencyTickers[selectedCurrency]}
Reserve {convertPrice(artifact.price, selectedCurrency)}
</button> </p>
<p className="text-neutral-600 mt-2">{artifact.description}</p>
<p className="text-neutral-500 font-bold mt-1">Location: {artifact.location}</p>
<div className="flex justify-end gap-4 mt-4 mr-2">
<button <button
onClick={() => alert("Purchased Successfully!")} onClick={() => alert("Purchased Successfully!")}
className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-500" className="px-10 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
> >
Buy Buy
</button> </button>
<button
onClick={() => setSelectedArtifact(null)}
className="px-4 py-2 bg-neutral-300 rounded-md hover:bg-neutral-400"
>
Close
</button>
</div> </div>
</div> </div>
</div> </div>
@ -211,10 +210,9 @@ export default function Shop() {
> >
<img src={artifact.image} alt={artifact.name} className="w-full h-56 object-cover" /> <img src={artifact.image} alt={artifact.name} className="w-full h-56 object-cover" />
<div className="p-4"> <div className="p-4">
<h3 className="text-lg font-bold">{artifact.name}</h3> <h3 className="text-lg font-semibold">{artifact.name}</h3>
<p className="text-neutral-700 mb-2">{artifact.description}</p>
<p className="text-neutral-500 mb-2">{artifact.location}</p> <p className="text-neutral-500 mb-2">{artifact.location}</p>
<p className="text-blue-600 font-bold text-md mt-4"> <p className="text-black font-bold text-md mt-2">
{currencyTickers[selectedCurrency]} {currencyTickers[selectedCurrency]}
{convertPrice(artifact.price, selectedCurrency)} {convertPrice(artifact.price, selectedCurrency)}
</p> </p>
@ -234,6 +232,7 @@ export default function Shop() {
))} ))}
</div> </div>
</div> </div>
{/* Sidebar */} {/* Sidebar */}
<div className="bg-white shadow-lg h-screen fixed right-0 overflow-y-auto"> <div className="bg-white shadow-lg h-screen fixed right-0 overflow-y-auto">
<Sidebar <Sidebar
@ -255,16 +254,17 @@ export default function Shop() {
</div> </div>
{/* Pagination Footer */} {/* Pagination Footer */}
<footer className="bg-white border-t border-neutral-300 py-2 text-center flex justify-center items-center mr-[19rem]"> <footer className="mt-10 bg-white border-t border-neutral-300 py-3 text-center flex justify-center items-center mr-[19rem]">
<button <button
onClick={handlePreviousPage} onClick={handlePreviousPage}
disabled={currentPage === 1} disabled={currentPage === 1}
className={`mx-2 px-4 py-1 bg-blue-700 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 ${
currentPage === 1 ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-600" currentPage === 1 ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-600"
}`} }`}
> >
&larr; Previous &larr; Previous
</button> </button>
<p className="mx-3 text-lg font-bold">{currentPage}</p>
<button <button
onClick={handleNextPage} onClick={handleNextPage}
disabled={indexOfLastArtifact >= artifacts.length} disabled={indexOfLastArtifact >= artifacts.length}

75
src/app/the-team/page.module.css
View File

@ -1,75 +0,0 @@
/* Container styling */
.container {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
color: #333;
background-color: #f9f9f9;
}
/* Header styling */
.header {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 10px;
}
.subheader {
font-size: 1.2rem;
color: #555;
margin-bottom: 30px;
}
/* Team styling */
.team {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center; /* Centers team member cards */
}
/* Individual team member card styling */
.card {
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 8px;
width: 90%; /* Width relative to the viewport */
max-width: 800px; /* Prevent it from getting too large */
padding: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
/* Team member image styling */
.image {
width: 110px; /* Both width and height are equal */
height: 110px;
border-radius: 50%; /* Makes the image circular */
object-fit: cover; /* Ensures the image fits perfectly without distortion */
}
/* Card text styling */
.text {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.name {
font-size: 1.5rem;
font-weight: bold;
color: #111;
margin-bottom: 5px;
}
.title {
font-size: 1.2rem;
color: #555;
margin-bottom: 10px;
}
.description {
font-size: 1rem;
color: #777;
}

64
src/app/the-team/page.tsx
View File

@ -1,46 +1,64 @@
"use client"; // Required for components in Next.js (using client-side rendering) "use client"; // Required for components in Next.js (using client-side rendering)
import styles from './page.module.css'; import Image from 'next/image';
const teamMembers = [ const teamMembers = [
{ name: "Tim Howitz", {
name: "Tim Howitz",
title: "Chief Crack Inspector", title: "Chief Crack Inspector",
description: "Tim is responsible for analysing structures on a day to day basis, in his home life he is a keen outdoors enthusiast, with 3 kids and a dog.", description:
image: "/Timthescientist.PNG" }, "Tim is responsible for analysing structures on a day to day basis, in his home life he is a keen outdoors enthusiast, with 3 kids and a dog.",
{ name: "Emily Neighbour", image: "/Timthescientist.PNG",
},
{
name: "Emily Neighbour",
title: "Chief Software Engineer", title: "Chief Software Engineer",
description: "Emily focuses on vital earthquake prediction models. In her personal life, her hobbies include knitting, birdwatching and becoming a mute", description:
image: "/Emilythescientist.PNG" }, "Emily focuses on vital earthquake prediction models. In her personal life, her hobbies include knitting, birdwatching and becoming a mute",
{ name: "Izzy Patterson", image: "/Emilythescientist.PNG",
},
{
name: "Izzy Patterson",
title: "Chief Geologist", title: "Chief Geologist",
description: "Izzy team are responsible for inspecting the rocks that make up our planet. For enjoyment she likes to look at rocks, sometimes she likes to lick them", description:
image: "/Izzythescientist.PNG" }, "Izzy team are responsible for inspecting the rocks that make up our planet. For enjoyment she likes to look at rocks, sometimes she likes to lick them",
{ name: "Lukeshan Thananchayan", image: "/Izzythescientist.PNG",
},
{
name: "Lukeshan Thananchayan",
title: "Chief Duster", title: "Chief Duster",
description: "Lukeshan and his team look at the dust particles created by an earthquake and how to minimise their damage. For pleasure - he likes to play monopoly, on repeat... maybe one day hell get a hotel", description:
image: "/Lukeshanthescientist.PNG" }, "Lukeshan and his team look at the dust particles created by an earthquake and how to minimise their damage. For pleasure - he likes to play monopoly, on repeat... maybe one day hell get a hotel",
image: "/Lukeshanthescientist.PNG",
},
]; ];
export default function Page() { export default function Page() {
return ( return (
<div className={styles.container}> <div className="h-full text-center bg-gradient-to-b from-neutral-100 to-neutral-50 pt-10">
{/* Header */} {/* Header */}
<h1 className={styles.header}>Meet The Team</h1> <h1 className="text-4xl font-bold mb-5">Meet The Team</h1>
<p className={styles.subheader}> <p className="text-lg text-neutral-600 mb-5">
Our expert team is made up of scientists around the globe. Our heads of department are shown below. Our expert team is made up of scientists around the globe. Our heads of department are shown below.
</p> </p>
{/* Team Members Section */} {/* Team Members Section */}
<div className={styles.team}> <div className="flex flex-col items-center gap-8">
{teamMembers.map((member, index) => ( {teamMembers.map((member, index) => (
<div key={index} className={styles.card}> <div key={index} className="flex bg-white align-middle rounded-2xl border border-neutral-300 w-1/2 shadow-sm">
{/* Image */} {/* Image */}
<img src={member.image} alt={member.name} className={styles.image} /> <div className="flex items-center ml-4">
<div className="relative w-24 h-24">
<div className="absolute inset-0 rounded-full overflow-hidden">
<Image height={5000} width={5000} src={member.image} alt={member.name} className="h-full w-full object-cover" />
</div>
</div>
</div>
{/* Text Content */} {/* Text Content */}
<div className={styles.text}> <div className="flex flex-col items-start pl-6 py-4">
<h2 className={styles.name}>{member.name}</h2> <h2 className="text-2xl font-bold">{member.name}</h2>
<p className={styles.title}>{member.title}</p> <p className="text-md text-neutral-600 font-bold">{member.title}</p>
<p className={styles.description}>{member.description}</p> <p className="text-neutral-600 mt-2 text-left">{member.description}</p>
</div> </div>
</div> </div>
))} ))}

59
src/components/navbar.tsx
View File

@ -1,16 +1,34 @@
"use client"; "use client";
import Image from "next/image"; import Image from 'next/image';
import Link from "next/link"; import Link from 'next/link';
import { usePathname } from "next/navigation"; import { usePathname } from 'next/navigation';
import { Dispatch, SetStateAction, useMemo, useState } from "react"; import { Dispatch, SetStateAction, useMemo, useState } from 'react';
import { FaRegUserCircle } from "react-icons/fa"; import { FaRegUserCircle } from 'react-icons/fa';
import { Currency } from "@appTypes/StoreModel"; import { Currency } from '@appTypes/StoreModel';
import AuthModal from "@components/AuthModal"; import AuthModal from '@components/AuthModal';
import { useStoreActions, useStoreState } from "@hooks/store"; import { useStoreActions, useStoreState } from '@hooks/store';
export default function Navbar({}: // currencySelector,
{
// currencySelector?: { selectedCurrency: string; setSelectedCurrency: Dispatch<SetStateAction<"GBP" | "USD" | "EUR">> };
}) {
const pathname = usePathname();
const selectedCurrency = useStoreState((state) => state.currency.selectedCurrency);
const setSelectedCurrency = useStoreActions((actions) => actions.currency.setSelectedCurrency);
const navOptions = useMemo(() => ["Earthquakes", "Observatories", "Warehouse", "Shop"], []);
// const navOptions = useMemo(() => ["Earthquakes"], []);
const aboutDropdown = ["Contact Us", "Our Mission", "The Team"];
// { label: "Our Mission", path: "/our-mission" },
// { label: "The Team", path: "/the-team" },
// { label: "Contact Us", path: "/contact-us" }]
const [isModalOpen, setIsModalOpen] = useState(false);
const currencies = useStoreState((state) => state.currency.currencies);
const currencyTickers = useStoreState((state) => state.currency.tickers);
function NavbarButton({ name, href, dropdownItems }: { name: string; href: string; dropdownItems?: string[] }) { function NavbarButton({ name, href, dropdownItems }: { name: string; href: string; dropdownItems?: string[] }) {
const pathname = usePathname();
const isActive = dropdownItems const isActive = dropdownItems
? dropdownItems.some((item) => pathname === `/${item.toLowerCase().replace(" ", "-")}`) ? dropdownItems.some((item) => pathname === `/${item.toLowerCase().replace(" ", "-")}`)
: pathname === href; : pathname === href;
@ -55,25 +73,6 @@ function NavbarButton({ name, href, dropdownItems }: { name: string; href: strin
); );
} }
export default function Navbar({}: // currencySelector,
{
// currencySelector?: { selectedCurrency: string; setSelectedCurrency: Dispatch<SetStateAction<"GBP" | "USD" | "EUR">> };
}) {
const pathname = usePathname();
const selectedCurrency = useStoreState((state) => state.currency.selectedCurrency);
const setSelectedCurrency = useStoreActions((actions) => actions.currency.setSelectedCurrency);
const navOptions = useMemo(() => ["Earthquakes", "Observatories", "Warehouse", "Shop"], []);
// const navOptions = useMemo(() => ["Earthquakes"], []);
const aboutDropdown = ["Contact Us", "Our Mission", "The Team"];
// { label: "Our Mission", path: "/our-mission" },
// { label: "The Team", path: "/the-team" },
// { label: "Contact Us", path: "/contact-us" }]
const [isModalOpen, setIsModalOpen] = useState(false);
const currencies = useStoreState((state) => state.currency.currencies);
const currencyTickers = useStoreState((state) => state.currency.tickers);
return ( return (
<div className="flex sticky top-0 w-full h-14 z-40 font-medium bg-white border border-b-neutral-200"> <div className="flex sticky top-0 w-full h-14 z-40 font-medium bg-white border border-b-neutral-200">
<div className="my-1 flex aspect-square ml-3 mr-3"> <div className="my-1 flex aspect-square ml-3 mr-3">
@ -99,7 +98,9 @@ export default function Navbar({}: // currencySelector,
let ticker = currencyTickers[item]; let ticker = currencyTickers[item];
return ( return (
<li key={item} onClick={() => setSelectedCurrency(item)}> <li key={item} onClick={() => setSelectedCurrency(item)}>
<div className={`block px-2 py-2 hover:bg-neutral-100 text-md`}>{`${item} (${ticker})`}</div> <div className={`block px-2 py-2 hover:bg-neutral-100 text-md`}>
{item} ({ticker})
</div>
</li> </li>
); );
})} })}