82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo, useState } from 'react';
|
|
|
|
import Map from '@components/Map';
|
|
import Sidebar from '@components/Sidebar';
|
|
|
|
export default function Earthquakes() {
|
|
const [selectedEventId, setSelectedEventId] = useState("");
|
|
const [hoveredEventId, setHoveredEventId] = useState("");
|
|
|
|
const events = useMemo(
|
|
() => [
|
|
{
|
|
id: "1234",
|
|
title: "Earthquake in Germany",
|
|
text1: "Magnitude 8.5",
|
|
text2: "30 minutes ago",
|
|
magnitude: 8.5,
|
|
longitude: 10.4515, // Near Berlin, Germany
|
|
latitude: 52.52,
|
|
},
|
|
{
|
|
id: "2134",
|
|
title: "Earthquake in California",
|
|
text1: "Magnitude 5.3",
|
|
text2: "2 hours ago",
|
|
magnitude: 5.3,
|
|
longitude: -122.4194, // Near San Francisco, California, USA
|
|
latitude: 37.7749,
|
|
},
|
|
{
|
|
id: "2314",
|
|
title: "Tremor in Japan",
|
|
text1: "Magnitude 4.7",
|
|
text2: "5 hours ago",
|
|
magnitude: 4.7,
|
|
longitude: 139.6917, // Near Tokyo, Japan
|
|
latitude: 35.6762,
|
|
},
|
|
{
|
|
id: "2341",
|
|
title: "Tremor in Spain",
|
|
text1: "Magnitude 2.1",
|
|
text2: "10 hours ago",
|
|
magnitude: 2.1,
|
|
longitude: -3.7038, // Near Madrid, Spain
|
|
latitude: 40.4168,
|
|
},
|
|
],
|
|
[]
|
|
);
|
|
|
|
return (
|
|
<div className="h-full flex overflow-hidden">
|
|
<div className="flex-grow">
|
|
<Map
|
|
events={events}
|
|
selectedEventId={selectedEventId}
|
|
setSelectedEventId={setSelectedEventId}
|
|
hoveredEventId={hoveredEventId}
|
|
setHoveredEventId={setHoveredEventId}
|
|
mapType="Earthquakes"
|
|
></Map>
|
|
</div>
|
|
<Sidebar
|
|
logTitle="Log an Earthquake"
|
|
logSubtitle="Record new earthquakes - time/date, location, magnitude, observatory and scientists"
|
|
recentsTitle="Recent Earthquakes"
|
|
events={events}
|
|
selectedEventId={selectedEventId}
|
|
setSelectedEventId={setSelectedEventId}
|
|
hoveredEventId={hoveredEventId}
|
|
setHoveredEventId={setHoveredEventId}
|
|
button1Name="Log an Earthquake"
|
|
button2Name="Search Earthquakes"
|
|
></Sidebar>
|
|
{/* <SidebarTest></SidebarTest> */}
|
|
</div>
|
|
);
|
|
}
|