47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import * as React from 'react';
|
|
|
|
interface StatsCardProps {
|
|
requestCount: number;
|
|
timeWindow: string;
|
|
requestsPerSecond: string;
|
|
totalBytes: string;
|
|
bytesPerSecond: string;
|
|
}
|
|
|
|
export const StatsCard: React.FC<StatsCardProps> = ({
|
|
requestCount,
|
|
timeWindow,
|
|
requestsPerSecond,
|
|
totalBytes,
|
|
bytesPerSecond,
|
|
}) => {
|
|
const cardStyle: React.CSSProperties = {
|
|
borderRadius: '0.5rem',
|
|
border: '1px solid #e2e8f0',
|
|
backgroundColor: 'white',
|
|
padding: '1rem',
|
|
boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
|
};
|
|
|
|
return (
|
|
<div className="mt-6" style={cardStyle}>
|
|
<div className="text-xl font-bold text-slate-900">
|
|
{requestCount} requests
|
|
<span className="text-base font-normal text-slate-600">
|
|
{' '}
|
|
in last {timeWindow}
|
|
</span>
|
|
</div>
|
|
<div className="mt-1 text-slate-600">
|
|
<span className="font-medium">{requestsPerSecond}</span> requests/sec
|
|
</div>
|
|
<div className="mt-1 text-sm text-slate-600">
|
|
<span className="font-medium">{totalBytes}</span> transferred •{' '}
|
|
<span className="font-medium">{bytesPerSecond}</span>/sec
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StatsCard;
|