43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* 회사 상태 표시용 작은 컬러 dot + 라벨.
|
|
* provisioning 상태일 때만 pulse 애니메이션.
|
|
*/
|
|
const MAP: Record<string, { color: string; label: string }> = {
|
|
active: { color: "rgb(var(--v5-green-rgb))", label: "활성" },
|
|
provisioning: { color: "var(--v5-primary)", label: "생성중" },
|
|
failed: { color: "var(--v5-red)", label: "실패" },
|
|
suspended: { color: "var(--v5-text-muted)", label: "정지" },
|
|
inactive: { color: "var(--v5-text-muted)", label: "비활성" },
|
|
};
|
|
|
|
export default function StatusDot({ status }: { status?: string }) {
|
|
const m = MAP[status || ""] || { color: "var(--v5-text-muted)", label: status || "—" };
|
|
const isProvisioning = status === "provisioning";
|
|
return (
|
|
<span
|
|
style={{
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
gap: 5,
|
|
fontSize: "0.7rem",
|
|
fontWeight: 600,
|
|
color: "var(--v5-text)",
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
width: 6,
|
|
height: 6,
|
|
borderRadius: "50%",
|
|
background: m.color,
|
|
boxShadow: `0 0 6px ${m.color}`,
|
|
animation: isProvisioning ? "pulsedot 1.4s ease-in-out infinite" : "none",
|
|
}}
|
|
/>
|
|
{m.label}
|
|
</span>
|
|
);
|
|
}
|