54 lines
2.5 KiB
TypeScript
54 lines
2.5 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
|
|
interface WaterTableProps {
|
|
data: { time: string; level: number; status: string }[];
|
|
}
|
|
|
|
export default function TabelAir({ data }: WaterTableProps) {
|
|
// We only show the latest record as "Current Data" per the image
|
|
const latest = data[0] || { time: "-", level: 0, status: "-" };
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl shadow-sm overflow-hidden mb-6 border border-gray-100">
|
|
<div className="px-6 py-4 border-b border-gray-100">
|
|
<h3 className="text-sm font-bold text-gray-800">Data Elevasi Air Saat Ini</h3>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left">
|
|
<thead>
|
|
<tr className="text-gray-500 text-[11px] font-bold border-b border-gray-50">
|
|
<th className="px-6 py-4">Lokasi</th>
|
|
<th className="px-6 py-4">Elevasi (cm)</th>
|
|
<th className="px-6 py-4">Status</th>
|
|
<th className="px-6 py-4">Waktu Update</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr className="text-sm text-gray-700">
|
|
<td className="px-6 py-4 font-medium">Sungai Tegal Bal Karangrejo</td>
|
|
<td className="px-6 py-4 font-bold">{latest.level} cm</td>
|
|
<td className="px-6 py-4">
|
|
<span
|
|
className={`px-3 py-1 rounded-full text-[11px] font-bold text-white shadow-sm ${latest.status === "NORMAL"
|
|
? "bg-green-500"
|
|
: latest.status === "WASPADA"
|
|
? "bg-amber-500"
|
|
: latest.status === "BAHAYA"
|
|
? "bg-red-500"
|
|
: "bg-gray-400"
|
|
}`}
|
|
>
|
|
{latest.status.charAt(0).toUpperCase() + latest.status.slice(1).toLowerCase()}
|
|
</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-xs text-gray-500">{latest.time}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|