feat: add AntiCheatBadge component

2026-04-30 19:52:26 +08:00
parent 32d197113e
commit 971173a3a6
1 changed files with 80 additions and 0 deletions
@@ -0,0 +1,80 @@
+import { Shield, ShieldCheck, ShieldX, ShieldQuestion } from "lucide-react";
+import { cn } from "~/lib/utils";
+
+interface AntiCheatBadgeProps {
+  antiCheatRelevant: boolean;
+  antiCheatStatus: "none" | "supported" | "unsupported" | "unknown" | null;
+  antiCheatName?: string | null;
+  compact?: boolean; // for list views
+  className?: string;
+}
+
+const statusConfig = {
+  supported: {
+    icon: ShieldCheck,
+    label: "Anti-Cheat: Supported",
+    color: "bg-green-500/15 text-green-400 border-green-500/30",
+  },
+  unsupported: {
+    icon: ShieldX,
+    label: "Anti-Cheat: Unsupported",
+    color: "bg-red-500/15 text-red-400 border-red-500/30",
+  },
+  unknown: {
+    icon: ShieldQuestion,
+    label: "Anti-Cheat: Unknown",
+    color: "bg-yellow-500/15 text-yellow-400 border-yellow-500/30",
+  },
+  none: {
+    icon: Shield,
+    label: "No Anti-Cheat",
+    color: "bg-zinc-500/15 text-zinc-400 border-zinc-500/30",
+  },
+} as const;
+
+export function AntiCheatBadge({
+  antiCheatRelevant,
+  antiCheatStatus,
+  antiCheatName,
+  compact = false,
+  className,
+}: AntiCheatBadgeProps) {
+  if (!antiCheatRelevant || !antiCheatStatus || antiCheatStatus === "none") {
+    return null;
+  }
+
+  const config = statusConfig[antiCheatStatus];
+  const Icon = config.icon;
+
+  if (compact) {
+    return (
+      <span
+        className={cn(
+          "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium",
+          config.color,
+          className
+        )}
+        title={antiCheatName ? `${config.label} (${antiCheatName})` : config.label}
+      >
+        <Icon className="h-3 w-3" />
+        {antiCheatStatus === "unsupported" && "AC"}
+      </span>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm font-medium",
+        config.color,
+        className
+      )}
+    >
+      <Icon className="h-4 w-4" />
+      <span>{config.label}</span>
+      {antiCheatName && (
+        <span className="text-xs opacity-75">({antiCheatName})</span>
+      )}
+    </div>
+  );
+}