Observatory map created

src/app/earthquakes/page.tsx

@@ -70,6 +70,8 @@ export default function Earthquakes() {
         setSelectedEventId={setSelectedEventId}
         hoveredEventId={hoveredEventId}
         setHoveredEventId={setHoveredEventId}
+        button1Name="Log an Earthquake"
+        button2Name="Search Earthquakes"
       ></Sidebar>
       {/* <SidebarTest></SidebarTest> */}
     </div>

src/app/observatories/page.tsx

@@ -1,10 +1,70 @@
-import Sidebar from "@components/sidebar_o";
+"use client";
+
+import Sidebar from "@components/Sidebar";
+import Map from "@components/Map";
+import { useState, useMemo } from "react";
 
 export default function Observatories() {
+  const [selectedEventId, setSelectedEventId] = useState("");
+  const [hoveredEventId, setHoveredEventId] = useState("");
+
+  const events = useMemo(
+    () => [
+      {
+        id: "1234",
+        title: "Earthquake - Berlin Observatory",
+        text1: "Logged by ",
+        text2: "30 minutes ago",
+        magnitude: 8.5,
+        longitude: 10.4515, // Near Berlin, Germany
+        latitude: 52.52,
+      },
+      {
+        id: "2134",
+        title: "New Observatory - Phuket, Thailand",
+        text1: "Dr. Neil Armstrong",
+        text2: "2 weeks ago",
+        magnitude: 0.0,
+        longitude: -122.4194,
+        latitude: 37.7749,
+      },
+      {
+        id: "2314",
+        title: "Observatory Scientist Change",
+        text1: "Dr. Samantha Green new lead scientist",
+        text2: "1 month ago",
+        magnitude: 0.0,
+        longitude: 139.6917,
+        latitude: 35.6762,
+      },
+    ],
+    []
+  );
+
   return (
-    <div className="w-full h-full">
+    <div className="h-full flex overflow-hidden">
-      <p>Observatories</p>
+      <div className="flex-grow">
-      <Sidebar></Sidebar>
+        <Map
+          events={events}
+          selectedEventId={selectedEventId}
+          setSelectedEventId={setSelectedEventId}
+          hoveredEventId={hoveredEventId}
+          setHoveredEventId={setHoveredEventId}
+        ></Map>
+      </div>
+      <Sidebar
+        logTitle="Observatory Mapping"
+        logSubtitle="Record and search observatories - time/date set-up, location, scientists and recent earthquakes"
+        recentsTitle="Observatory Events"
+        events={events}
+        selectedEventId={selectedEventId}
+        setSelectedEventId={setSelectedEventId}
+        hoveredEventId={hoveredEventId}
+        setHoveredEventId={setHoveredEventId}
+        button1Name="Log a New Observatory"
+        button2Name="Search Observatories"
+      ></Sidebar>
+      {/* <SidebarTest></SidebarTest> */}
     </div>
   );
 }

src/components/Sidebar.tsx

@@ -14,6 +14,8 @@ interface SidebarProps {
   setSelectedEventId: Dispatch<SetStateAction<string>>;
   hoveredEventId: Event["id"];
   setHoveredEventId: Dispatch<SetStateAction<string>>;
+  button1Name: string;
+  button2Name: string;
 }
 
 function MagnitudeNumber({ magnitude }: { magnitude: number }) {
@@ -45,6 +47,8 @@ export default function Sidebar({
   setSelectedEventId,
   hoveredEventId,
   setHoveredEventId,
+  button1Name,
+  button2Name,
 }: SidebarProps) {
   return (
     <div className="flex flex-col py-6 h-full w-full max-w-xs bg-gradient-to-b from-neutral-100 to-neutral-50 shadow-lg">
@@ -53,7 +57,12 @@ export default function Sidebar({
         <p className="text-sm text-neutral-600 leading-relaxed">{logSubtitle}</p>
         <Link href="/">
           <button className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200 font-medium">
-            Log Event
+            {button1Name}
+          </button>
+        </Link>
+        <Link href="/">
+          <button className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200 font-medium">
+            {button2Name}
           </button>
         </Link>
       </div>

src/components/map.tsx

@@ -2,6 +2,7 @@ import { useCallback, useState } from "react";
 import React, { useRef, useEffect, Dispatch, SetStateAction } from "react";
 import mapboxgl, { LngLatBounds } from "mapbox-gl";
 import "mapbox-gl/dist/mapbox-gl.css";
+import { GiObservatory } from "react-icons/gi";
 import Event from "@appTypes/Event";
 import getMagnitudeColor from "@utils/getMagnitudeColour";
 
@@ -75,10 +76,12 @@ function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEven
       events.forEach((event) => {
         const color = getMagnitudeColor(event.magnitude);
 
+        //<GiObservatory />
+
         // Create marker container
         const markerElement = document.createElement("div");
-        markerElement.style.width = "20px"; // Increased size to accommodate pulse
+        markerElement.style.width = "50px"; // Increased size to accommodate pulse
-        markerElement.style.height = "20px";
+        markerElement.style.height = "50px";
         markerElement.style.position = "absolute";
         markerElement.style.display = "flex";
         markerElement.style.alignItems = "center";
@@ -86,8 +89,8 @@ function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEven
 
         // Central dot
         const dotElement = document.createElement("div");
-        dotElement.style.width = "8px";
+        dotElement.style.width = "10px";
-        dotElement.style.height = "8px";
+        dotElement.style.height = "10px";
         dotElement.style.backgroundColor = color;
         dotElement.style.borderRadius = "50%";
         dotElement.style.position = "absolute";

src/components/navbar.tsx

@@ -52,7 +52,7 @@ export default function Navbar() {
     <div className="flex sticky top-0 w-full h-14 z-40 font-medium bg-white border border-b-neutral-200">
       <div className="my-1 flex aspect-square ml-3 mr-3">
         <Link href="/" className="rounded-full">
-          <Image height={2000} width={2000} alt="Logo" className="border border-neutral-300 rounded-full" src="/logo.png" />
+          <Image height={50} width={50} alt="Logo" className="border border-neutral-300 rounded-full" src="/logo.png" />
         </Link>
       </div>
       <div className="flex">