44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo, useState } from "react";
|
|
import useSWR from "swr";
|
|
|
|
import Map from "@components/Map";
|
|
import Sidebar from "@components/Sidebar";
|
|
import { createPoster, fetcher } from "@utils/axiosHelpers";
|
|
|
|
export default function Earthquakes() {
|
|
const [selectedEventId, setSelectedEventId] = useState("");
|
|
const [hoveredEventId, setHoveredEventId] = useState("");
|
|
// todo properly integrate loading
|
|
const { data, error, isLoading } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 5 }));
|
|
|
|
return (
|
|
<div className="h-full flex overflow-hidden">
|
|
<div className="flex-grow">
|
|
<Map
|
|
events={data ? data.earthquakes : []}
|
|
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={data ? data.earthquakes : []}
|
|
selectedEventId={selectedEventId}
|
|
setSelectedEventId={setSelectedEventId}
|
|
hoveredEventId={hoveredEventId}
|
|
setHoveredEventId={setHoveredEventId}
|
|
button1Name="Log an Earthquake"
|
|
button2Name="Search Earthquakes"
|
|
></Sidebar>
|
|
{/* <SidebarTest></SidebarTest> */}
|
|
</div>
|
|
);
|
|
}
|