tremor-tracker/src/app/warehouse/page.tsx

"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 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>
	);
}