From 33e96bfe4772ca2c0577b34abf1187afb96dbc3b Mon Sep 17 00:00:00 2001
From: armorbreak001 <contact@agentvote.cc>
Date: Tue, 14 Apr 2026 21:03:25 +0800
Subject: [PATCH] feat(frontend): add guild role badge component with variants

- Add RoleBadge component for owner/admin/moderator/auditor/member roles
- Each role has unique color, icon, and styling (gold admin, cyan auditor, etc.)
- Uses Lucide icons: Crown (owner), Shield (admin/mod), Eye (auditor), User (member)
- Size variants: sm, md, lg
- Hides text label on very small screens (icon-only on mobile)
- Responsive and accessible with title attributes
---
 frontend/src/components/guild/RoleBadge.tsx | 110 ++++++++++++++++++++
 frontend/src/components/guild/index.ts      |   4 +-
 2 files changed, 113 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/guild/RoleBadge.tsx

diff --git a/frontend/src/components/guild/RoleBadge.tsx b/frontend/src/components/guild/RoleBadge.tsx
new file mode 100644
index 0000000..8583b56
--- /dev/null
+++ b/frontend/src/components/guild/RoleBadge.tsx
@@ -0,0 +1,110 @@
+'use client'
+
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Shield, Eye, User, Crown } from 'lucide-react'
+
+/* ---------- types ---------- */
+
+type GuildRole = 'owner' | 'admin' | 'moderator' | 'auditor' | 'member'
+
+interface RoleBadgeProps {
+  role: GuildRole
+  /** Show role text label (hidden on very small screens) */
+  showLabel?: boolean
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+/* ---------- role config ---------- */
+
+interface RoleConfig {
+  label: string
+  colorClass: string
+  bgClass: string
+  borderClass: string
+  icon: typeof Shield
+}
+
+const ROLE_CONFIG: Record<GuildRole, RoleConfig> = {
+  owner: {
+    label: 'Owner',
+    colorClass: 'text-amber-300',
+    bgClass: 'bg-amber-500/15',
+    borderClass: 'border-amber-500/30',
+    icon: Crown,
+  },
+  admin: {
+    label: 'Admin',
+    colorClass: 'text-yellow-300',
+    bgClass: 'bg-yellow-500/15',
+    borderClass: 'border-yellow-500/30',
+    icon: Shield,
+  },
+  moderator: {
+    label: 'Mod',
+    colorClass: 'text-blue-300',
+    bgClass: 'bg-blue-500/15',
+    borderClass: 'border-blue-500/30',
+    icon: Shield,
+  },
+  auditor: {
+    label: 'Auditor',
+    colorClass: 'text-cyan-400',
+    bgClass: 'bg-cyan-500/15',
+    borderClass: 'border-cyan-500/30',
+    icon: Eye,
+  },
+  member: {
+    label: 'Member',
+    colorClass: 'text-slate-400',
+    bgClass: 'bg-slate-500/10',
+    borderClass: 'border-slate-500/20',
+    icon: User,
+  },
+}
+
+/* ---------- size map ---------- */
+
+const SIZE_STYLES = {
+  sm: { container: 'px-1.5 py-0.5 text-[10px] gap-1', iconSize: 'h-3 w-3' },
+  md: { container: 'px-2.5 py-1 text-xs gap-1.5', iconSize: 'h-3.5 w-3.5' },
+  lg: { container: 'px-3 py-1.5 text-sm gap-2', iconSize: 'h-4 w-4' },
+}
+
+/* ---------- component ---------- */
+
+export function RoleBadge({
+  role,
+  showLabel = true,
+  size = 'md',
+  className,
+}: RoleBadgeProps) {
+  const config = ROLE_CONFIG[role]
+  const Icon = config.icon
+  const sizeStyle = SIZE_STYLES[size]
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-full border font-medium whitespace-nowrap',
+        config.bgClass,
+        config.borderClass,
+        config.colorClass,
+        sizeStyle.container,
+        className
+      )}
+      title={config.label}
+    >
+      <Icon className={sizeStyle.iconSize} aria-hidden="true" />
+      {/* Hide text on small screens when showLabel is on */}
+      <span className={cn(!showLabel && 'hidden sm:inline')}>
+        {config.label}
+      </span>
+    </span>
+  )
+}
+
+export type { GuildRole }
+export default RoleBadge
diff --git a/frontend/src/components/guild/index.ts b/frontend/src/components/guild/index.ts
index e5f4791..be5ef98 100644
--- a/frontend/src/components/guild/index.ts
+++ b/frontend/src/components/guild/index.ts
@@ -1,2 +1,4 @@
 export { default as GuildCard } from './GuildCard'
-export type { GuildTier } from './GuildCard'
\ No newline at end of file
+export type { GuildTier } from './GuildCard'
+export { RoleBadge } from './RoleBadge'
+export type { GuildRole } from './RoleBadge'
\ No newline at end of file