e9dce47d46
- New ControllerBadge (owner / admin / organiser / verified owner). - Crew page hero: founder -> Owner, delegated admin -> Admin. - Spot page: Owner; Shop page: 'Verified owner' (NIP-05 domain); Event page: Organiser. - Card studio card-type chips show your role on each entity (Park=owner, Crew=owner/admin, Event=organiser) so it's clear what you control. - i18n role.* EN/ES.
34 lines
1.4 KiB
TypeScript
34 lines
1.4 KiB
TypeScript
import { Crown, ShieldCheck, BadgeCheck } from 'lucide-react';
|
|
import { useTranslation } from '@/contexts/language';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type Role = 'owner' | 'admin' | 'organiser' | 'verifiedOwner';
|
|
|
|
const CONFIG: Record<Role, { key: string; cls: string; Icon: typeof Crown }> = {
|
|
owner: { key: 'owner', cls: 'border-[#ccff00]/40 bg-[#ccff00]/10 text-[#ccff00]', Icon: Crown },
|
|
admin: { key: 'admin', cls: 'border-purple-400/40 bg-purple-400/10 text-purple-300', Icon: ShieldCheck },
|
|
organiser: { key: 'organiser', cls: 'border-blue-400/40 bg-blue-400/10 text-blue-300', Icon: ShieldCheck },
|
|
verifiedOwner: { key: 'verifiedOwner', cls: 'border-[#ccff00]/40 bg-[#ccff00]/10 text-[#ccff00]', Icon: BadgeCheck },
|
|
};
|
|
|
|
/**
|
|
* A small badge showing the viewer's control over the entity on screen
|
|
* (`owner`/`admin`/`organiser`) or a verified-ownership signal (`verifiedOwner`).
|
|
* Deliberately only rendered when it applies — no empty chrome.
|
|
*/
|
|
export function ControllerBadge({ role, className }: { role: Role; className?: string }) {
|
|
const { t } = useTranslation();
|
|
const { key, cls, Icon } = CONFIG[role];
|
|
return (
|
|
<span
|
|
className={cn(
|
|
'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-black uppercase tracking-wide',
|
|
cls,
|
|
className,
|
|
)}
|
|
>
|
|
<Icon className="h-3 w-3" />
|
|
{t(`role.${key}`)}
|
|
</span>
|
|
);
|
|
}
|