sidebar added to earthquake page

package.json

@@ -11,10 +11,13 @@
     },
     "dependencies": {
         "@prisma/client": "^6.4.1",
+        "leaflet": "^1.9.4",
         "next": "15.1.7",
         "prisma": "^6.4.1",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "react-leaflet": "^5.0.0",
+        "react-map-gl": "^8.0.1"
     },
     "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -27,4 +30,4 @@
         "tailwindcss": "^3.4.1",
         "typescript": "^5"
     }
-}
+}

src/app/earthquakes/page.tsx

@@ -1,10 +1,12 @@
 import Navbar from "@/components/navbar";
+import Sidebar from "@/components/sidebar";
 
 
 export default function Earthquakes() {
     return (
         <div className="w-full h-full">
             <Navbar></Navbar>
+            <Sidebar></Sidebar>
             <p>Earthquakes</p>
         </div>
     )

src/components/InteractiveMap.tsx

@@ -0,0 +1,11 @@
+import InteractiveMap from "@/components/interactivemap";
+
+export default function Home() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+      <h1 className="text-2xl font-bold mb-4">Interactive Map</h1>
+      {/* Render InteractiveMap */}
+      <InteractiveMap />
+    </div>
+  );
+}

src/components/map.tsx

@@ -0,0 +1,39 @@
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import "leaflet/dist/leaflet.css"; // Leaflet CSS
+import React from "react";
+
+const points = [
+    { id: 1, name: "Point A", position: [51.505, -0.09] },
+    { id: 2, name: "Point B", position: [51.515, -0.1] },
+    { id: 3, name: "Point C", position: [51.525, -0.11] },
+];
+
+const InteractiveMap = () => {
+    return (
+        <div className="w-full h-96 flex justify-center items-center">
+            <MapContainer
+                center={[51.505, -0.09]} // Default map center
+                zoom={13}                // Zoom level
+                style={{ height: "100%", width: "100%" }}
+                className="rounded-lg shadow-lg"
+            >
+                {/* Tile Layer for map background */}
+                <TileLayer
+                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+
+                {/* Add markers for points */}
+                {points.map((point) => (
+                    <Marker key={point.id} position={point.position}>
+                        {/* Popup when marker is clicked */}
+                        <Popup>{point.name}</Popup>
+                        {/* Optional hover tooltip */}
+                    </Marker>
+                ))}
+            </MapContainer>
+        </div>
+    );
+};
+
+export default InteractiveMap;

src/components/sidebar.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Link from "next/link";
+
+const Sidebar = () => {
+    return (
+        <div className="flex flex-col h-screen w-64 bg-gray-400 text-white border-l border-gray-700">
+            <div className="flex flex-col p-4 border-b border-gray-700">
+                <h2 className="text-xl font-semibold mb-2">Log an Earthquake</h2>
+                <p className="text-sm text-gray-700">
+                    Record new earthquakes - time/date, location, magnitude, observatory and scientists
+                </p>
+                <button className="mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">
+                    <Link href="/">
+                        Log Event
+                    </Link>
+                </button>
+            </div>
+
+            {/* Section: Recent Events - Will need to be replaced with a link to the database*/}
+            <div className="flex-1 p-4">
+                <h2 className="text-xl font-semibold mb-2">Recent Events</h2>
+                <ul className="space-y-2">
+                    <li className="bg-gray-700 p-3 rounded hover:bg-gray-600">
+                        <p className="text-sm">Earthquake in California</p>
+                        <p className="text-xs text-gray-300">Magnitude 5.3</p>
+                        <p className="text-xs text-gray-400">2 hours ago</p>
+                    </li>
+                    <li className="bg-gray-700 p-3 rounded hover:bg-gray-600">
+                        <p className="text-sm">Tremor in Japan</p>
+                        <p className="text-xs text-gray-300">Magnitude 4.7</p>
+                        <p className="text-xs text-gray-400">5 hours ago</p>
+                    </li>
+                    <li className="bg-gray-700 p-3 rounded hover:bg-gray-600">
+                        <p className="text-sm">Tremor in Spain</p>
+                        <p className="text-xs text-gray-300">Magnitude 2.1</p>
+                        <p className="text-xs text-gray-400">10 hours ago</p>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default Sidebar;