45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
/**
|
|
* Live Traffic Cards
|
|
* Ball Studios <https://git.balls.studio>
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
interface LiveStats {
|
|
rx_bytes: number;
|
|
tx_bytes: number;
|
|
recorded_at: string;
|
|
}
|
|
|
|
function formatBytes(bytes: number): string {
|
|
if (bytes < 1024) return `${bytes} B`;
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
|
if (bytes < 1024 ** 3) return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
|
|
return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
|
|
}
|
|
|
|
interface Props { live: LiveStats | null; }
|
|
|
|
export default function LiveTrafficCards({ live }: Props) {
|
|
return (
|
|
<div className='addon-stat-grid'>
|
|
<div className='addon-stat-card inbound'>
|
|
<div className='addon-stat-label'>⬇ Inbound</div>
|
|
<div className='addon-stat-value'>{live ? formatBytes(live.rx_bytes) : '—'}</div>
|
|
</div>
|
|
<div className='addon-stat-card outbound'>
|
|
<div className='addon-stat-label'>⬆ Outbound</div>
|
|
<div className='addon-stat-value'>{live ? formatBytes(live.tx_bytes) : '—'}</div>
|
|
</div>
|
|
<div className='addon-stat-card total'>
|
|
<div className='addon-stat-label'>⇅ Total</div>
|
|
<div className='addon-stat-value'>{live ? formatBytes(live.rx_bytes + live.tx_bytes) : '—'}</div>
|
|
</div>
|
|
<div className='addon-stat-card updated'>
|
|
<div className='addon-stat-label'>🕐 Last Update</div>
|
|
<div className='addon-stat-value'>{live ? new Date(live.recorded_at).toLocaleTimeString() : '—'}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|