indicator

1import { cn } from "@/lib/utils";
2import { cva, type VariantProps } from "class-variance-authority";
3import type { ComponentProps } from "react";
4 
5const statusIndicatorVariants = cva(
6	[
7		"relative flex size-2 shrink-0 items-center justify-center rounded-full",
8		"*:rounded-full *:bg-current",
9		"[&_[data-slot=indicator-dot]]:size-[75%]",
10		"[&_[data-slot=indicator-ping]]:absolute [&_[data-slot=indicator-ping]]:size-full",
11	],
12	{
13		variants: {
14			color: {
15				emerald: "text-emerald-500",
16				rose: "text-rose-500",
17				amber: "text-amber-500",
18				sky: "text-sky-500",
19			},
20			pulse: {
21				true: "[&_[data-slot=indicator-ping]]:animate-ping",
22				false: "[&_[data-slot=indicator-ping]]:hidden",
23			},
24		},
25		defaultVariants: {
26			color: "emerald",
27			pulse: true,
28		},
29	}
30);
31 
32export type StatusIndicatorProps = ComponentProps<"span"> &
33	VariantProps<typeof statusIndicatorVariants>;
34 
35export function StatusIndicator({
36	className,
37	color,
38	pulse,
39	...props
40}: StatusIndicatorProps) {
41	return (
42		<span
43			className={cn(statusIndicatorVariants({ color, pulse }), className)}
44			{...props}
45		>
46			<span aria-hidden data-slot="indicator-ping" />
47			<span aria-hidden data-slot="indicator-dot" />
48		</span>
49	);
50}