48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import clsx from 'clsx';
|
|
import React from 'react';
|
|
|
|
type HealthStatus = 'health' | 'error' | 'warning' | 'none';
|
|
|
|
export interface HealthBarBeat {
|
|
title?: string;
|
|
status: HealthStatus;
|
|
}
|
|
|
|
export interface HealthBarProps {
|
|
size?: 'small' | 'large';
|
|
beats: HealthBarBeat[];
|
|
}
|
|
export const HealthBar: React.FC<HealthBarProps> = React.memo((props) => {
|
|
const size = props.size ?? 'small';
|
|
|
|
return (
|
|
<div
|
|
className={clsx('flex', {
|
|
'gap-[3px]': size === 'small',
|
|
'gap-1': size === 'large',
|
|
})}
|
|
>
|
|
{props.beats.map((beat, i) => (
|
|
<div
|
|
key={i}
|
|
title={beat.title}
|
|
className={clsx(
|
|
'rounded-full transition-transform hover:scale-150',
|
|
{
|
|
'h-4 w-[5px]': size === 'small',
|
|
'h-8 w-2': size === 'large',
|
|
},
|
|
{
|
|
'bg-green-500': beat.status === 'health',
|
|
'bg-red-600': beat.status === 'error',
|
|
'bg-yellow-400': beat.status === 'warning',
|
|
'bg-gray-400': beat.status === 'none',
|
|
}
|
|
)}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
});
|
|
HealthBar.displayName = 'HealthBar';
|