56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import { Box } from './Box';
|
|
|
|
export interface StatusDotProps {
|
|
intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
|
|
color?: string; // Alias for intent or custom color
|
|
pulse?: boolean;
|
|
size?: 'sm' | 'md' | 'lg' | number;
|
|
}
|
|
|
|
/**
|
|
* StatusDot
|
|
*
|
|
* A simple status indicator dot with optional pulse effect.
|
|
*/
|
|
export function StatusDot({
|
|
intent = 'telemetry',
|
|
color: colorProp,
|
|
pulse = false,
|
|
size = 'md',
|
|
}: StatusDotProps) {
|
|
const intentColorMap = {
|
|
primary: 'var(--ui-color-intent-primary)',
|
|
success: 'var(--ui-color-intent-success)',
|
|
warning: 'var(--ui-color-intent-warning)',
|
|
critical: 'var(--ui-color-intent-critical)',
|
|
telemetry: 'var(--ui-color-intent-telemetry)',
|
|
};
|
|
|
|
const sizeMap = {
|
|
sm: '0.375rem',
|
|
md: '0.5rem',
|
|
lg: '0.75rem',
|
|
};
|
|
|
|
const color = colorProp || intentColorMap[intent];
|
|
const dimension = typeof size === 'string' ? sizeMap[size] : `${size * 0.25}rem`;
|
|
|
|
return (
|
|
<Box position="relative" width={dimension} height={dimension}>
|
|
<Box
|
|
fullWidth
|
|
fullHeight
|
|
style={{ backgroundColor: color, borderRadius: '9999px' }}
|
|
/>
|
|
{pulse && (
|
|
<Box
|
|
position="absolute"
|
|
inset={0}
|
|
className="animate-ping"
|
|
style={{ backgroundColor: color, opacity: 0.75, borderRadius: '9999px' }}
|
|
/>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|