Current state

src/components/users/user-status-badge.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+interface UserStatusBadgeProps {
+  active: boolean
+}
+
+export function UserStatusBadge({ active }: UserStatusBadgeProps) {
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        active
+          ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20"
+          : "bg-zinc-500/10 text-zinc-600 dark:text-zinc-400 border-zinc-500/20"
+      )}
+    >
+      <span className={cn("mr-1.5 h-1.5 w-1.5 rounded-full", {
+        "bg-emerald-500": active,
+        "bg-zinc-500": !active,
+      })} />
+      {active ? "Active" : "Inactive"}
+    </Badge>
+  )
+}