{children}
-
-
- );
+ return (
+
+ {children}
+
+
-
- );
+ return (
+
-
-
-
+
+ );
}
diff --git a/src/app/our-mission/page.tsx b/src/app/our-mission/page.tsx
index 24793b7..a7757d4 100644
--- a/src/app/our-mission/page.tsx
+++ b/src/app/our-mission/page.tsx
@@ -2,54 +2,46 @@
//export default function Page()
const OurMission = () => {
- return (
-
+
+
+
-
- );
+ return (
+
-
- Our Mission
-- At Earthquake Awareness Initiative, our mission is to help people worldwide prepare for and recover from earthquakes. Through education, research, and innovative technology, we work tirelessly to empower communities with the knowledge they need to stay safe before, during, and after seismic events. -
-- We aim to bridge the gap between scientific research and community awareness by providing resources, tools, and real-time updates for earthquake preparedness. Together, we aspire to save lives, mitigate impacts, and foster resilience against nature's powerful forces. -
-
-
-
- 
-
-
- Education
-- Providing accessible resources to educate people about earthquake preparedness. -
-
- 
-
-
- Research
-- Supporting scientific studies to enhance understanding of seismic activity. -
-
- 
-
-
- Technology
-- Leveraging innovation to deliver real-time alerts and safety tools. -
-
+
+ );
};
-export default OurMission;
\ No newline at end of file
+export default OurMission;
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 1626553..0684fb5 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -1,185 +1,282 @@
"use client";
-import Sidebar from "@/components/sidebar";
-import { useState } from "react";
+import { Dispatch, SetStateAction, useCallback, useState } from "react";
+
+import Artifact from "@appTypes/Artifact";
+import { Currency } from "@appTypes/StoreModel";
+import Sidebar from "@components/Sidebar";
+import { useStoreState } from "@hooks/store";
// 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, 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 },
- { 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 armor.", location: "Normandy, France", image: "/images/artifact15.jpg", price: 400 },
+const artifacts: Artifact[] = [
+ {
+ 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, 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,
+ },
+ {
+ 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 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 (
-
+
+ Our Mission
++ At Earthquake Awareness Initiative, our mission is to help people + worldwide prepare for and recover from earthquakes. Through education, research, and innovative technology, we work + tirelessly to empower communities with the knowledge they need to stay safe before, during, and after seismic events. +
++ We aim to bridge the gap between scientific research and community awareness by providing resources, tools, and + real-time updates for earthquake preparedness. Together, we aspire to save lives, mitigate impacts, and foster + resilience against nature's powerful forces. +
+
+
+
+
+
+
+ Education
++ Providing accessible resources to educate people about earthquake preparedness. +
+
+
+
+
+ Research
++ Supporting scientific studies to enhance understanding of seismic activity. +
+
+
+
+
+ Technology
++ Leveraging innovation to deliver real-time alerts and safety tools. +
+
-
- );
-};
-
-// ArtifactCard Component
-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 (
-
- 
-
- {artifact.name}
-{artifact.description}
-Location: {artifact.location}
-Price: ${artifact.price}
-
-
-
-
-
- onSelect(artifact)} // Opens modal
- >
-
-
- );
-};
-
// Shop Component
export default function Shop() {
- const [currentPage, setCurrentPage] = useState(1);
- 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 [currentPage, setCurrentPage] = useState(1);
+ const [selectedArtifact, setSelectedArtifact] = useState
-
- {artifact.name}
-{artifact.description}
-{artifact.location}
-- {selectedCurrency}: {convertPrice(artifact.price, selectedCurrency)} -
- -
- {/* Main Content */}
-
- );
+ return (
+
- {/* Artifact Grid */}
-
+ return (
+
- {currentArtifacts.map((artifact) => (
-
+ const handleOverlayClick = (e: { target: any; currentTarget: any }) => {
+ if (e.target === e.currentTarget) {
+ setSelectedArtifact(null);
+ }
+ };
- {/* Sidebar */}
-
-
+
+ );
+ }
- {/* Pagination Footer */}
-
+ // ArtifactCard Component
+ function ArtifactCard({ artifact }: { artifact: Artifact }) {
+ return (
+
+
+
+ {artifact.name}
+{artifact.description}
+Location: {artifact.location}
+Price: ${artifact.price}
+
+
+
+
+
+ setSelectedArtifact(artifact)} // Opens modal
+ >
+
+
+ );
+ }
- {/* Modal */}
-
+
+ {artifact.name}
+{artifact.description}
+{artifact.location}
++ {currencyTickers[selectedCurrency]} + {convertPrice(artifact.price, selectedCurrency)} +
+
+ {/* Main Content */}
+
+ );
}
diff --git a/src/app/warehouse/page.tsx b/src/app/warehouse/page.tsx
index 92806cd..4d80506 100644
--- a/src/app/warehouse/page.tsx
+++ b/src/app/warehouse/page.tsx
@@ -1,57 +1,55 @@
"use client";
-import Sidebar from "@/components/sidebar";
+import Sidebar from "@/components/Sidebar";
import { useState, useMemo } from "react";
export default function Warehouse() {
- const [selectedEventId, setSelectedEventId] = useState("");
- const [hoveredEventId, setHoveredEventId] = useState("");
- const events = useMemo(
- () => [
- {
- id: "1234",
- title: "Artifact found - Germany Earthquake",
- text1: "Mortar and pestle",
- text2: "10 minutes ago",
- longitude: 10.4515, // Near Berlin, Germany
- latitude: 52.52,
- },
- {
- id: "2134",
- title: "All artifacts from California earthquake transported",
- text1: "India to London",
- text2: "15 hours ago",
- longitude: -122.4194, // Near San Francisco, California, USA
- latitude: 37.7749,
- },
- {
- id: "2341",
- title: "7 artifacts destroyed - Spain earthquake",
- text1: "edVases and pots from Madrid",
- text2: "3 weeks ago",
- longitude: -3.7038, // Near Madrid, Spain
- latitude: 40.4168,
- },
- ],
- []
- );
+ const [selectedEventId, setSelectedEventId] = useState("");
+ const [hoveredEventId, setHoveredEventId] = useState("");
+ const events = useMemo(
+ () => [
+ {
+ id: "1234",
+ title: "Artifact found - Germany Earthquake",
+ text1: "Mortar and pestle",
+ text2: "10 minutes ago",
+ longitude: 10.4515, // Near Berlin, Germany
+ latitude: 52.52,
+ },
+ {
+ id: "2134",
+ title: "All artifacts from California earthquake transported",
+ text1: "India to London",
+ text2: "15 hours ago",
+ longitude: -122.4194, // Near San Francisco, California, USA
+ latitude: 37.7749,
+ },
+ {
+ id: "2341",
+ title: "7 artifacts destroyed - Spain earthquake",
+ text1: "edVases and pots from Madrid",
+ text2: "3 weeks ago",
+ longitude: -3.7038, // Near Madrid, Spain
+ latitude: 40.4168,
+ },
+ ],
+ []
+ );
- return (
-
+ {/* Artifact Grid */}
+
+ {/* Sidebar */}
+
+ {currentArtifacts.map((artifact) => (
+
+
+ {}}
+ hoveredEventId=""
+ setHoveredEventId={() => {}}
+ button1Name="Add New Artifact"
+ button2Name="Search Artifacts"
+ />
+
+
+ {/* Pagination Footer */}
+
+ {/* Modal */}
+ {selectedArtifact &&
-
- );
+ return (
+ - warehouse image pasted in here -
-
+
+ );
}
diff --git a/src/components/AuthModal.tsx b/src/components/AuthModal.tsx
index b46522d..38218e3 100644
--- a/src/components/AuthModal.tsx
+++ b/src/components/AuthModal.tsx
@@ -1,7 +1,8 @@
// tells React if you're using its "server-side rendering" features. this component runs only on the client-side (browser)
"use client";
// importing React hooks or utilities that enhance functionality inside the component
-import { useState, FormEvent, useRef, MouseEvent, useEffect } from "react";
+import { FormEvent, MouseEvent, useEffect, useRef, useState } from "react";
+
/*
useState: Used to manage state (data that changes over time).
FormEvent: TypeScript definition for form-related events like submission.
@@ -12,39 +13,40 @@ import { useState, FormEvent, useRef, MouseEvent, useEffect } from "react";
// defining a type for the props (inputs) that AuthModal expects
interface AuthModalProps {
- isOpen: boolean; // bool for if the modal should be visible
- onClose: () => void; //A function that will be executed to close the modal
+ isOpen: boolean; // bool for if the modal should be visible
+ onClose: () => void; //A function that will be executed to close the modal
}
// creates a React functional component
-export default function AuthModal({ isOpen, onClose }: AuthModalProps) { //AuthModalProps ensures TypeScript validates the props to match the type definition above
- const [isLogin, setIsLogin] = useStatewarehouse image pasted in here
+
-
+ );
}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 75b0438..3ee96c8 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,100 +1,101 @@
-import React from "react";
-import { Dispatch, SetStateAction } from "react";
import Link from "next/link";
+import React, { Dispatch, SetStateAction } from "react";
import { TbHexagon } from "react-icons/tb";
+
import Event from "@appTypes/Event";
import getMagnitudeColor from "@utils/getMagnitudeColour";
interface SidebarProps {
- logTitle: string;
- logSubtitle: string;
- recentsTitle: string;
- events: Event[];
- selectedEventId: Event["id"];
- setSelectedEventId: Dispatch
-
-
+ {isLogin ? "Login" : "Sign Up"}
+ return ( +
+
- );
+
+
+
- {isLogin ? "Login" : "Sign Up"}
- {/* Form */} - + {/* Form */} + -- {isLogin ? "Need an account?" : "Already have an account?"}{" "} - -
-+ {isLogin ? "Need an account?" : "Already have an account?"}{" "} + +
+
-
- );
+ // Define color based on magnitude (0-10 scale)
+ return (
+
-
-
- {whole}
- .
- {decimal}
-
-
+
+ );
}
export default function Sidebar({
- logTitle,
- logSubtitle,
- recentsTitle,
- events,
- selectedEventId,
- setSelectedEventId,
- hoveredEventId,
- setHoveredEventId,
- button1Name,
- button2Name,
+ logTitle,
+ logSubtitle,
+ recentsTitle,
+ events,
+ selectedEventId,
+ setSelectedEventId,
+ hoveredEventId,
+ setHoveredEventId,
+ button1Name,
+ button2Name,
}: SidebarProps) {
- return (
-
+
+
+ {whole}
+ .
+ {decimal}
+
+
-
+ );
}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 93ac50b..c2ac4c8 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,75 +1,117 @@
"use client";
-import { useState } from "react";
-
-import AuthModal from "@components/AuthModal";
-import { usePathname } from "next/navigation";
-import Link from "next/link";
import Image from "next/image";
-import { useMemo } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Dispatch, SetStateAction, useMemo, useState } from "react";
import { FaRegUserCircle } from "react-icons/fa";
+import { Currency } from "@appTypes/StoreModel";
+import AuthModal from "@components/AuthModal";
+import { useStoreActions, useStoreState } from "@hooks/store";
+
function NavbarButton({ name, href, dropdownItems }: { name: string; href: string; dropdownItems?: string[] }) {
- const pathname = usePathname();
- const isActive = dropdownItems ? dropdownItems.some((item) => pathname === `/${item.toLowerCase().replace(" ", "-")}`) : pathname === href;
+ const pathname = usePathname();
+ const isActive = dropdownItems
+ ? dropdownItems.some((item) => pathname === `/${item.toLowerCase().replace(" ", "-")}`)
+ : pathname === href;
- return (
-
- );
+ return (
+
+ );
}
-export default function Navbar() {
- 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);
+export default function Navbar({}: // currencySelector,
+{
+ // currencySelector?: { selectedCurrency: string; setSelectedCurrency: Dispatch
-
+ return (
+ {logTitle}
-{logSubtitle}
- - - - - - -
+
+
+
+
+
+
- );
+
+
+
+
+
+
+ {logTitle}
+{logSubtitle}
-
-
- {recentsTitle}
-
- {events.map((event) => (
-
- ))}
-
-
+
+ {recentsTitle}
+
+ {events.map((event) => (
+
+ ))}
+
+
- setIsModalOpen(false)} />
-
- );
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ const currencies = useStoreState((state) => state.currency.currencies);
+ const currencyTickers = useStoreState((state) => state.currency.tickers);
+
+ return (
+
-
-
-
- {navOptions.map((name) => (
-
-
-
-
+ setIsModalOpen(false)} />
+
+ );
}
diff --git a/src/components/sidebar_e.tsx b/src/components/sidebar_e.tsx
index e6efa25..6c1dfe6 100644
--- a/src/components/sidebar_e.tsx
+++ b/src/components/sidebar_e.tsx
@@ -1,44 +1,42 @@
-import React from 'react';
import Link from "next/link";
+import React from "react";
const Sidebar = () => {
- return (
-
+
+
+
+ {navOptions.map((name) => (
+
+
+
+ {pathname.includes("shop") && (
+
+ )}
+
+
+
-
+ );
};
export default Sidebar;
diff --git a/src/components/sidebar_o.tsx b/src/components/sidebar_o.tsx
index 7a7859d..2cfd78a 100644
--- a/src/components/sidebar_o.tsx
+++ b/src/components/sidebar_o.tsx
@@ -1,44 +1,40 @@
-import React from 'react';
import Link from "next/link";
+import React from "react";
const Sidebar = () => {
- return (
-
-
+ return (
+ Log an Earthquake
-- Record new earthquakes - time/date, location, magnitude, observatory and scientists -
- -
+
- );
+ {/* Section: Recent Events - Will need to be replaced with a link to the database*/}
+
+
- {/* Section: Recent Events - Will need to be replaced with a link to the database*/}
- Log an Earthquake
++ Record new earthquakes - time/date, location, magnitude, observatory and scientists +
+ +
-
- Recent Events
--
-
-
-
Earthquake in California
-Magnitude 5.3
-2 hours ago
-
- -
-
Tremor in Japan
-Magnitude 4.7
-5 hours ago
-
- -
-
Tremor in Spain
-Magnitude 2.1
-10 hours ago
-
-
+
+ Recent Events
+-
+
-
+
Earthquake in California
+Magnitude 5.3
+2 hours ago
+
+ -
+
Tremor in Japan
+Magnitude 4.7
+5 hours ago
+
+ -
+
Tremor in Spain
+Magnitude 2.1
+10 hours ago
+
+
-
+ );
};
export default Sidebar;
diff --git a/src/hooks/store.ts b/src/hooks/store.ts
new file mode 100644
index 0000000..8d331e6
--- /dev/null
+++ b/src/hooks/store.ts
@@ -0,0 +1,10 @@
+"use client";
+import { createTypedHooks } from "easy-peasy";
+
+import { StoreModel } from "@appTypes/StoreModel";
+
+export const typedHooks = createTypedHooks
-
+ return (
+ Observatories
-- Observatory events - location, scientists, recent earthquakes -
- -
+
- );
+ {/* Section: Recent Events - Will need to be replaced with a link to the database*/}
+
+
- {/* Section: Recent Events - Will need to be replaced with a link to the database*/}
- Observatories
+Observatory events - location, scientists, recent earthquakes
+ +
-
- Recent Observatory Events
--
-
-
-
Earthquake in California
-Magnitude 5.3
-Cali Observatory
-
- -
-
Tremor in Japan
-Magnitude 4.7
-Kyoto Observatory
-
- -
-
Tremor in Spain
-Magnitude 2.1
-Madrid Observatory
-
-
+
+ Recent Observatory Events
+-
+
-
+
Earthquake in California
+Magnitude 5.3
+Cali Observatory
+
+ -
+
Tremor in Japan
+Magnitude 4.7
+Kyoto Observatory
+
+ -
+
Tremor in Spain
+Magnitude 2.1
+Madrid Observatory
+
+