@@ -133,22 +173,24 @@ export default function Earthquakes() {
setHoveredEventId={setHoveredEventId}
button1Name="Log an Earthquake"
button2Name="Search Earthquakes"
- onButton1Click={() => setLogModalOpen(true)} // Correct!
+ onButton1Click={handleLogClick} // <--- Important!
onButton2Click={() => setSearchModalOpen(true)}
+ button1Disabled={!canLogEarthquake} // <--- For style only!
/>
setSearchModalOpen(false)}
- onSelect={(eq) => {
- setSelectedEventId(eq.code);
- // setSelectedSearchResult(eq); // optional
- }}
+ onSelect={(eq) => setSelectedEventId(eq.code)}
/>
setLogModalOpen(false)}
onSuccess={() => mutate()} // To refresh
/>
+ setNoAccessModalOpen(false)}
+ />
);
}
\ No newline at end of file
diff --git a/src/components/BottomFooter.tsx b/src/components/BottomFooter.tsx
index 39339fd..fcb9f57 100644
--- a/src/components/BottomFooter.tsx
+++ b/src/components/BottomFooter.tsx
@@ -2,15 +2,15 @@ import React, { useCallback, useRef, useState } from "react";
import Link from "next/link";
export default function BottomFooter() {
- // Lava flood state & timer
- const [lavaActive, setLavaActive] = useState(false);
+ // ig easter egg
+ const [lavaActive, setLavaActive] = useState(false);
const lavaTimeout = useRef
+ >;
- hoveredEventId: GeologicalEvent["id"];
- setHoveredEventId: Dispatch>;
- button1Name: string;
- button2Name: string;
- onButton2Click?: () => void;
+ logTitle: string;
+ logSubtitle: string;
+ recentsTitle: string;
+ events: GeologicalEvent[];
+ selectedEventId: GeologicalEvent["id"];
+ setSelectedEventId: Dispatch>;
+ hoveredEventId: GeologicalEvent["id"];
+ setHoveredEventId: Dispatch>;
+ button1Name: string;
+ button2Name: string;
+ onButton2Click?: () => void;
onButton1Click?: () => void;
+ button1Disabled?: boolean;
}
function MagnitudeNumber({ magnitude }: { magnitude: number }) {
- const magnitudeStr = magnitude.toFixed(1);
- const [whole, decimal] = magnitudeStr.split(".");
-
- return (
- (null);
+ const eventsContainerRef = useRef(null);
+ useEffect(() => {
+ if (selectedEventId && eventsContainerRef.current) {
+ const selectedEventElement = eventsContainerRef.current.querySelector(`[data-event-id="${selectedEventId}"]`);
+ if (selectedEventElement) {
+ selectedEventElement.scrollIntoView({
+ block: "center",
+ behavior: "smooth",
+ });
+ }
+ }
+ }, [selectedEventId]);
- useEffect(() => {
- if (selectedEventId && eventsContainerRef.current) {
- const selectedEventElement = eventsContainerRef.current.querySelector(`[data-event-id="${selectedEventId}"]`);
- if (selectedEventElement) {
- selectedEventElement.scrollIntoView({
- block: "center",
- behavior: "smooth",
- });
- }
- }
- }, [selectedEventId]);
-
- return (
-
+ 
+
© TremorTracker 2025
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index b88ec84..e9c56fd 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,135 +1,125 @@
-import Link from "next/link";
import React, { Dispatch, SetStateAction, useEffect, useRef } from "react";
import { TbHexagon } from "react-icons/tb";
-
import GeologicalEvent from "@appTypes/Event";
import getMagnitudeColor from "@utils/getMagnitudeColour";
interface SidebarProps {
- logTitle: string;
- logSubtitle: string;
- recentsTitle: string;
- events: GeologicalEvent[];
- selectedEventId: GeologicalEvent["id"];
- setSelectedEventId: Dispatch
+
-
- );
+ const magnitudeStr = magnitude.toFixed(1);
+ const [whole, decimal] = magnitudeStr.split(".");
+ return (
+
-
-
- {whole}
- .
- {decimal}
-
-
+
+ );
}
-// todo change sidebar event highlighting on selection
-
export default function Sidebar({
- logTitle,
- logSubtitle,
- recentsTitle,
- events,
- selectedEventId,
- setSelectedEventId,
- hoveredEventId,
- setHoveredEventId,
- button1Name,
- button2Name,
- onButton2Click,
+ logTitle,
+ logSubtitle,
+ recentsTitle,
+ events,
+ selectedEventId,
+ setSelectedEventId,
+ hoveredEventId,
+ setHoveredEventId,
+ button1Name,
+ button2Name,
+ onButton2Click,
onButton1Click,
+ button1Disabled = false,
}: SidebarProps) {
- const eventsContainerRef = useRef
+
+
+ {whole}
+ .
+ {decimal}
+
+
-
+ );
+}
\ No newline at end of file
-
+
-
+ {logTitle}
-{logSubtitle}
- - {onButton1Click ? ( - - ) : ( - + return ( +
+
+
+
- );
-}
+ ))}
+
+
+ {logTitle}
+{logSubtitle}
+ + +
+
+ {recentsTitle}
+
+
-
+ {events.map((event) => (
-
- )}
-
-
-
-
-
- {recentsTitle}
-
-
-
- {events.map((event) => (
-
- ))}
-
-