warehouse page started

src/app/warehouse/page.tsx

@@ -1,7 +1,57 @@
+"use client";
+import Sidebar from "@/components/sidebar";
+import { useState, useMemo } from "react";
+
 export default function Warehouse() {
+    const [selectedEventId, setSelectedEventId] = useState("");
+    const [hoveredEventId, setHoveredEventId] = useState("");
+    const events = useMemo(
+      () => [
+        {
+          id: "1234",
+          title: "Artifact found - Germany Earthquake",
+          text1: "Mortar and pestle",
+          text2: "10 minutes ago",
+          longitude: 10.4515, // Near Berlin, Germany
+          latitude: 52.52,
+        },
+        {
+          id: "2134",
+          title: "All artifacts from California earthquake transported",
+          text1: "India to London",
+          text2: "15 hours ago",
+          longitude: -122.4194, // Near San Francisco, California, USA
+          latitude: 37.7749,
+        },
+        {
+          id: "2341",
+          title: "7 artifacts destroyed - Spain earthquake",
+          text1: "edVases and pots from Madrid",
+          text2: "3 weeks ago",
+          longitude: -3.7038, // Near Madrid, Spain
+          latitude: 40.4168,
+        },
+      ],
+      []
+    );
+
   return (
     <div className="w-full h-full">
-      <p>Warehouse</p>
+      <p>
+        warehouse image pasted in here
+      </p>
+      <Sidebar
+        logTitle="Artifact Retrieval and Tracking"
+        logSubtitle="Record new artifacts collected - name, description, time/date found, location found, scientist and collection stage"
+        recentsTitle="Artifact News"
+        events={events}
+        selectedEventId={selectedEventId}
+        setSelectedEventId={setSelectedEventId}
+        hoveredEventId={hoveredEventId}
+        setHoveredEventId={setHoveredEventId}
+        button1Name="Log New Artifacts"
+        button2Name="Search Artifacts"
+      ></Sidebar>
     </div>
   );
 }