-
Earthquakes
-
+
);
}
diff --git a/src/app/globals.css b/src/app/globals.css
index 968f6ad..48e87e9 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -18,3 +18,26 @@ body {
color: var(--foreground);
background: var(--background);
}
+
+/* Increase specificity and use !important where necessary */
+.mapboxgl-popup .mapboxgl-popup-content {
+ @apply rounded-xl p-4 px-5 drop-shadow-lg border border-neutral-300 max-w-xs !important;
+}
+
+/* Hide the popup tip */
+.mapboxgl-popup .mapboxgl-popup-tip {
+ display: none !important;
+}
+
+/* Child elements */
+.mapboxgl-popup-content h3 {
+ @apply text-sm font-medium text-neutral-800 !important;
+}
+
+.mapboxgl-popup-content p {
+ @apply text-xs text-neutral-600 !important;
+}
+
+.mapboxgl-popup-content p + p {
+ @apply text-neutral-500 !important;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5572567..c086fe6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,5 @@
import type { Metadata } from "next";
-import Navbar from "@/components/navbar";
+import Navbar from "@components/Navbar";
import { Inter } from "next/font/google";
import "./globals.css";
@@ -20,9 +20,9 @@ export default function RootLayout({
}>) {
return (
-
+
- {children}
+
{children}
);
diff --git a/src/app/observatories/page.tsx b/src/app/observatories/page.tsx
index 173b280..2e17d80 100644
--- a/src/app/observatories/page.tsx
+++ b/src/app/observatories/page.tsx
@@ -1,4 +1,4 @@
-import Sidebar from "@/components/sidebar_o";
+import Sidebar from "@components/sidebar_o";
export default function Observatories() {
return (
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0b61962..980b12e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,11 +8,13 @@ export default function Home() {
{["Earthquake 1", "Earthquake 2", "Earthquake 3"].map((name) => (
diff --git a/src/components/InteractiveMap.tsx b/src/components/InteractiveMap.tsx
deleted file mode 100644
index 27870ac..0000000
--- a/src/components/InteractiveMap.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import InteractiveMap from "@/components/InteractiveMap";
-
-export default function Home() {
- return (
-
-
Interactive Map
- {/* Render InteractiveMap */}
-
-
- );
-}
\ No newline at end of file
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 0000000..5ce8b5f
--- /dev/null
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,89 @@
+import React from "react";
+import { Dispatch, SetStateAction } from "react";
+import Link from "next/link";
+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
>;
+ hoveredEventId: Event["id"];
+ setHoveredEventId: Dispatch>;
+}
+
+function MagnitudeNumber({ magnitude }: { magnitude: number }) {
+ // Convert magnitude to string with one decimal place
+ const magnitudeStr = magnitude.toFixed(1);
+ const [whole, decimal] = magnitudeStr.split(".");
+
+ // Define color based on magnitude (0-10 scale)
+ return (
+
+
+
+
+ {whole}
+ .
+ {decimal}
+
+
+
+
+
{logTitle}
+
{logSubtitle}
+
+
+
+
+
+
+
{recentsTitle}
+
+ {events.map((event) => (
+
+ ))}
+
+
+
-
- {/* Tile Layer for map background */}
-
+// Map component with location-style pulsing dots, animations, and tooltips
+function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEventId, setHoveredEventId }: MapComponentProps) {
+ const map = useRef(null);
+ const markers = useRef<{ [key: string]: mapboxgl.Marker }>({});
+ const [mapBounds, setMapBounds] = useState();
- {/* Add markers for points */}
- {points.map((point) => (
-
- {/* Popup when marker is clicked */}
- {point.name}
- {/* Optional hover tooltip */}
-
- ))}
-
-
+
${event.title}
+
Magnitude: ${event.magnitude}
+
${event.text2}
+