From e1b03a0cb5bfbb86a1a88be910c1326f3d21ba08 Mon Sep 17 00:00:00 2001
From: Emily Neighbour <emily.neighbour@dyson.com>
Date: Wed, 19 Mar 2025 15:59:18 +0000
Subject: [PATCH] sidebar for observatories

---
 src/app/earthquakes/page.tsx                  |  2 +-
 src/app/observatories/page.tsx                |  2 +
 src/components/InteractiveMap.tsx             |  2 +-
 src/components/{sidebar.tsx => sidebar_e.tsx} |  0
 src/components/sidebar_o.tsx                  | 44 +++++++++++++++++++
 5 files changed, 48 insertions(+), 2 deletions(-)
 rename src/components/{sidebar.tsx => sidebar_e.tsx} (100%)
 create mode 100644 src/components/sidebar_o.tsx

diff --git a/src/app/earthquakes/page.tsx b/src/app/earthquakes/page.tsx
index adcd46c..d74de16 100644
--- a/src/app/earthquakes/page.tsx
+++ b/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() {
diff --git a/src/app/observatories/page.tsx b/src/app/observatories/page.tsx
index 5688ef4..7b92251 100644
--- a/src/app/observatories/page.tsx
+++ b/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>
     )
diff --git a/src/components/InteractiveMap.tsx b/src/components/InteractiveMap.tsx
index e8d8e82..27870ac 100644
--- a/src/components/InteractiveMap.tsx
+++ b/src/components/InteractiveMap.tsx
@@ -1,4 +1,4 @@
-import InteractiveMap from "@/components/interactivemap";
+import InteractiveMap from "@/components/InteractiveMap";
 
 export default function Home() {
   return (
diff --git a/src/components/sidebar.tsx b/src/components/sidebar_e.tsx
similarity index 100%
rename from src/components/sidebar.tsx
rename to src/components/sidebar_e.tsx
diff --git a/src/components/sidebar_o.tsx b/src/components/sidebar_o.tsx
new file mode 100644
index 0000000..7a7859d
--- /dev/null
+++ b/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;