30bf8298dd
Some checks failed
Release Workflow / determine-release-type (push) Has been cancelled
Release Workflow / checks (push) Has been cancelled
Release Workflow / e2e-tests (push) Has been cancelled
Release Workflow / build-images (push) Has been cancelled
Release Workflow / publish-release (push) Has been cancelled
61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import { cn } from "~/client/lib/utils";
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
|
|
|
|
type StatusVariant = "success" | "neutral" | "error" | "warning" | "info";
|
|
|
|
interface StatusDotProps {
|
|
variant: StatusVariant;
|
|
label: string;
|
|
animated?: boolean;
|
|
}
|
|
|
|
export const StatusDot = ({ variant, label, animated }: StatusDotProps) => {
|
|
const statusMapping = {
|
|
success: {
|
|
color: "bg-success shadow-[0_0_8px_rgba(16,185,129,0.5)]",
|
|
colorLight: "bg-success/60",
|
|
animated: animated ?? true,
|
|
},
|
|
neutral: {
|
|
color: "bg-gray-500",
|
|
colorLight: "bg-gray-400",
|
|
animated: animated ?? false,
|
|
},
|
|
error: {
|
|
color: "bg-red-500",
|
|
colorLight: "bg-red-400",
|
|
animated: animated ?? true,
|
|
},
|
|
warning: {
|
|
color: "bg-yellow-500",
|
|
colorLight: "bg-yellow-400",
|
|
animated: animated ?? true,
|
|
},
|
|
info: {
|
|
color: "bg-blue-500",
|
|
colorLight: "bg-blue-400",
|
|
animated: animated ?? true,
|
|
},
|
|
}[variant];
|
|
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild aria-label={label}>
|
|
<span className="relative flex size-3 mx-auto">
|
|
{statusMapping?.animated && (
|
|
<span
|
|
className={cn(
|
|
"absolute inline-flex h-full w-full animate-[ping_3s_cubic-bezier(0,0,0.2,1)_infinite] rounded-full opacity-50",
|
|
`${statusMapping.colorLight}`,
|
|
)}
|
|
/>
|
|
)}
|
|
<span className={cn("relative inline-flex size-3 rounded-full", `${statusMapping?.color}`)} />
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>{label}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
};
|