| import { CheckCircle2, Server, ShieldCheck, ShieldAlert, ShieldOff } from 'lucide-react' |
|
|
| export default function QueueCards({ queueStatus, t }) { |
| if (!queueStatus) { |
| return null |
| } |
|
|
| return ( |
| <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4"> |
| <div className="bg-card border border-border rounded-xl p-4 flex flex-col justify-between shadow-sm relative overflow-hidden group"> |
| <div className="absolute right-0 top-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity"> |
| <CheckCircle2 className="w-16 h-16" /> |
| </div> |
| <p className="text-xs font-medium text-muted-foreground uppercase tracking-widest">{t('accountManager.available')}</p> |
| <div className="mt-2 flex items-baseline gap-2"> |
| <span className="text-3xl font-bold text-foreground">{queueStatus.available}</span> |
| <span className="text-xs text-muted-foreground">{t('accountManager.accountsUnit')}</span> |
| </div> |
| </div> |
| <div className="bg-card border border-border rounded-xl p-4 flex flex-col justify-between shadow-sm relative overflow-hidden group"> |
| <div className="absolute right-0 top-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity"> |
| <Server className="w-16 h-16" /> |
| </div> |
| <p className="text-xs font-medium text-muted-foreground uppercase tracking-widest">{t('accountManager.inUse')}</p> |
| <div className="mt-2 flex items-baseline gap-2"> |
| <span className="text-3xl font-bold text-foreground">{queueStatus.in_use}</span> |
| <span className="text-xs text-muted-foreground">{t('accountManager.threadsUnit')}</span> |
| </div> |
| </div> |
| <div className="bg-card border border-border rounded-xl p-4 flex flex-col justify-between shadow-sm relative overflow-hidden group"> |
| <div className="absolute right-0 top-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity"> |
| <ShieldCheck className="w-16 h-16" /> |
| </div> |
| <p className="text-xs font-medium text-muted-foreground uppercase tracking-widest">{t('accountManager.roleNormal')}</p> |
| <div className="mt-2 flex items-baseline gap-2"> |
| <span className="text-3xl font-bold text-foreground">{queueStatus.normal_count ?? '-'}</span> |
| <span className="text-xs text-muted-foreground">{t('accountManager.accountsUnit')}</span> |
| </div> |
| </div> |
| <div className="bg-card border border-amber-500/20 rounded-xl p-4 flex flex-col justify-between shadow-sm relative overflow-hidden group"> |
| <div className="absolute right-0 top-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity"> |
| <ShieldAlert className="w-16 h-16 text-amber-500" /> |
| </div> |
| <p className="text-xs font-medium text-amber-500/80 uppercase tracking-widest">{t('accountManager.roleStandby')}</p> |
| <div className="mt-2 flex items-baseline gap-2"> |
| <span className="text-3xl font-bold text-amber-500">{queueStatus.standby_count ?? '-'}</span> |
| <span className="text-xs text-muted-foreground">{t('accountManager.accountsUnit')}</span> |
| </div> |
| </div> |
| <div className="bg-card border border-red-500/20 rounded-xl p-4 flex flex-col justify-between shadow-sm relative overflow-hidden group"> |
| <div className="absolute right-0 top-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity"> |
| <ShieldOff className="w-16 h-16 text-red-500" /> |
| </div> |
| <p className="text-xs font-medium text-red-500/80 uppercase tracking-widest">{t('accountManager.bannedBadge')}</p> |
| <div className="mt-2 flex items-baseline gap-2"> |
| <span className="text-3xl font-bold text-red-500">{queueStatus.banned_count ?? '-'}</span> |
| <span className="text-xs text-muted-foreground">{t('accountManager.accountsUnit')}</span> |
| </div> |
| </div> |
| </div> |
| ) |
| } |
|
|
