Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | 110x 110x 110x 110x 110x 110x 110x 110x 110x 110x 110x 110x 109x 109x 109x 109x 109x 110x 110x 110x 110x 110x 110x 110x 110x 110x | interface StatusIndicatorProps {
status: "UP" | "DOWN";
pulse?: boolean;
}
export default function StatusIndicator({
status,
pulse = true,
}: StatusIndicatorProps) {
const isUp = status === "UP";
return (
<span className="inline-flex items-center gap-2">
<span
className={`relative flex h-2.5 w-2.5 rounded-full ${
isUp ? "bg-emerald-500" : "bg-red-500"
}`}
>
{pulse && (
<span
className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${
isUp ? "bg-emerald-400" : "bg-red-400"
}`}
/>
)}
</span>
<span
className={`text-sm font-medium ${
isUp ? "text-emerald-600" : "text-red-600"
}`}
>
{status}
</span>
</span>
);
}
|