sidebar for observatories

src/app/earthquakes/page.tsx

@@ -1,5 +1,5 @@
 import Navbar from "@/components/navbar";
-import Sidebar from "@/components/sidebar";
+import Sidebar from "@/components/sidebar_e";
 
 
 export default function Earthquakes() {

src/app/observatories/page.tsx

@@ -1,9 +1,11 @@
 import Navbar from "@/components/navbar";
+import Sidebar from "@/components/sidebar_o";
 
 export default function Observatories() {
     return (
         <div className="w-full h-full">
             <Navbar></Navbar>
+            <Sidebar></Sidebar>
             <p>Observatories</p>
         </div>
     )

src/components/InteractiveMap.tsx

@@ -1,4 +1,4 @@
-import InteractiveMap from "@/components/interactivemap";
+import InteractiveMap from "@/components/InteractiveMap";
 
 export default function Home() {
   return (

src/components/sidebar_o.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">Observatories</h2>
+                <p className="text-sm text-gray-700">
+                    Observatory events - location, scientists, recent earthquakes
+                </p>
+                <button className="mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">
+                    <Link href="/">
+                        Observatory News
+                    </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 Observatory 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">Cali Observatory</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">Kyoto Observatory</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">Madrid Observatory</p>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default Sidebar;