88 lines
3.1 KiB
TypeScript
88 lines
3.1 KiB
TypeScript
import Link from "next/link";
|
|
import React, { Dispatch, SetStateAction, useState } from "react";
|
|
import { TbHexagon } from "react-icons/tb";
|
|
|
|
import Event from "@appTypes/Event";
|
|
import getMagnitudeColor from "@utils/getMagnitudeColour";
|
|
|
|
function setButton1(button1Name) {
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
return (
|
|
modalOpen && (
|
|
<div className="fixed z-50 inset-0 bg-black bg-opacity-50 flex items-center justify-center">
|
|
<div className="bg-white rounded-lg shadow-lg max-w-6xl w-full p-10">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h2 className="text-2xl font-extrabold">Log New Earthquake</h2>
|
|
<button
|
|
onClick={() => setModalOpen(false)}
|
|
className="text-2xl font-bold text-gray-500 hover:text-gray-900"
|
|
aria-label="Close modal"
|
|
>
|
|
×
|
|
</button>
|
|
</div>
|
|
{/* Blank Table */}
|
|
<table className="w-full border mb-4">
|
|
<thead>
|
|
<tr>
|
|
<th className="border px-2 py-1">Date</th>
|
|
<th className="border px-2 py-1">Code</th>
|
|
<th className="border px-2 py-1">Magnitude</th>
|
|
<th className="border px-2 py-1">Observatory</th>
|
|
<th className="border px-2 py-1">Type</th>
|
|
<th className="border px-2 py-1">Latitude</th>
|
|
<th className="border px-2 py-1">Longitude</th>
|
|
<th className="border px-2 py-1">Location</th>
|
|
<th className="border px-2 py-1">Observatory</th>
|
|
<th className="border px-2 py-1">Depth</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td className="border px-2 py-1">
|
|
<input type="date" className="border p-1 w-full" disabled />
|
|
</td>
|
|
<td className="border px-2 py-1">
|
|
<input type="number" className="border p-1 w-full" disabled />
|
|
</td>
|
|
<td className="border px-2 py-1">
|
|
<input type="text" className="border p-1 w-full" disabled />
|
|
</td>
|
|
<td className="border px-2 py-1">
|
|
<input type="text" className="border p-1 w-full" disabled />
|
|
</td>
|
|
<td className="border px-2 py-1">
|
|
<input type="text" className="border p-1 w-full" disabled />
|
|
</td>
|
|
<td className="border px-2 py-1">
|
|
<input type="date" className="border p-1 w-full" disabled />
|
|
</td>
|
|
<td className="border px-2 py-1">
|
|
<input type="number" className="border p-1 w-full" disabled />
|
|
</td>
|
|
<td className="border px-2 py-1">
|
|
<input type="text" className="border p-1 w-full" disabled />
|
|
</td>
|
|
<td className="border px-2 py-1">
|
|
<input type="text" className="border p-1 w-full" disabled />
|
|
</td>
|
|
<td className="border px-2 py-1">
|
|
<input type="text" className="border p-1 w-full" disabled />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div className="flex justify-end gap-4">
|
|
<button onClick={() => setModalOpen(true)} className="bg-blue-600 text-white px-10 py-2 rounded">
|
|
Add
|
|
</button>
|
|
<button onClick={() => setModalOpen(false)} className="bg-blue-600 text-white px-4 py-2 rounded">
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|
|
}
|