44 lines
877 B
TypeScript
44 lines
877 B
TypeScript
import React from 'react';
|
|
import { Box } from './primitives/Box';
|
|
|
|
interface StatusDotProps {
|
|
color?: string;
|
|
pulse?: boolean;
|
|
size?: number;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* StatusDot
|
|
*
|
|
* A simple status indicator dot with optional pulse effect.
|
|
*/
|
|
export function StatusDot({
|
|
color = '#4ED4E0',
|
|
pulse = false,
|
|
size = 2,
|
|
className = ''
|
|
}: StatusDotProps) {
|
|
const sizeClass = `w-${size} h-${size}`;
|
|
|
|
return (
|
|
<Box position="relative" className={`${sizeClass} ${className}`}>
|
|
<Box
|
|
w="full"
|
|
h="full"
|
|
rounded="full"
|
|
style={{ backgroundColor: color }}
|
|
/>
|
|
{pulse && (
|
|
<Box
|
|
position="absolute"
|
|
inset={0}
|
|
rounded="full"
|
|
className="animate-ping"
|
|
style={{ backgroundColor: color, opacity: 0.75 }}
|
|
/>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|