DotPing.tsx34 lines · main

1	import { cn } from 'ui'
2
3	interface DotPingProps {
4	animate?: boolean
5	variant?: 'primary' | 'default' | 'warning'
6	}
7
8	export const DotPing = ({ animate = true, variant = 'primary' }: DotPingProps) => {
9	return (
10	<div className="relative align-middle w-2.5 h-2.5">
11	<span
12	className={cn(
13	'absolute inset-0 rounded-full',
14	animate && 'animate-ping',
15	variant === 'primary' && 'bg-brand/20',
16	variant === 'default' && 'bg-selection/20',
17	variant === 'warning' && 'bg-warning/20'
18	)}
19	style={{
20	animationDelay: '1s',
21	animationDuration: '1.5s',
22	}}
23	/>
24	<span
25	className={cn(
26	'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-block w-2 h-2 rounded-full',
27	variant === 'primary' && 'bg-brand',
28	variant === 'default' && 'bg-selection',
29	variant === 'warning' && 'bg-warning'
30	)}
31	/>
32	</div>
33	)
34	}