49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faChartSimple } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
type StatusReadsProps = {
|
|
reads: {
|
|
totalPending: number;
|
|
totalActive: number;
|
|
totalSent: number;
|
|
totalReceived: number;
|
|
totalLost: number;
|
|
sanityCheck: boolean;
|
|
sanityCheckFormula: string;
|
|
};
|
|
isReadsLoading?: boolean;
|
|
};
|
|
|
|
const StatusReads = ({ reads, isReadsLoading }: StatusReadsProps) => {
|
|
const totalPending = reads?.totalPending ?? 0;
|
|
const totalActive = reads?.totalActive ?? 0;
|
|
const totalSent = reads?.totalSent ?? 0;
|
|
const totalLost = reads?.totalLost ?? 0;
|
|
const totalReceived = reads?.totalReceived ?? 0;
|
|
|
|
if (isReadsLoading) {
|
|
return <p className="text-slate-400">Loading reads…</p>;
|
|
}
|
|
return (
|
|
<div className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241]">
|
|
<div className="flex flex-row gap-2 items-center">
|
|
<span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
|
|
<FontAwesomeIcon icon={faChartSimple} />
|
|
</span>
|
|
|
|
<p className="text-lg">Reads</p>
|
|
</div>
|
|
|
|
<div className="text-slate-400 mt-1">
|
|
Pending: <span className="text-yellow-500">{totalPending}</span> | Active:{" "}
|
|
<span className="text-cyan-500">{totalActive}</span> | Lost: <span className="text-red-500">{totalLost}</span>
|
|
<br />
|
|
Sent / Received: <span className="text-blue-500">{totalSent}</span> |{" "}
|
|
<span className="text-green-500">{totalReceived}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StatusReads;
|