135 lines
4.2 KiB
TypeScript
135 lines
4.2 KiB
TypeScript
import React from 'react'
|
|
import { Check, ShieldAlert, Bug, TestTube2, Crown } from 'lucide-react'
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
|
|
|
interface UserBadgesProps {
|
|
isAdmin?: boolean
|
|
isVerified?: boolean
|
|
isBugHunter?: boolean
|
|
isBetaTester?: boolean
|
|
className?: string
|
|
onlyShowHighest?: boolean
|
|
}
|
|
|
|
export function UserBadges({ isAdmin, isVerified, isBugHunter, isBetaTester, className = "h-3 w-3", onlyShowHighest }: UserBadgesProps) {
|
|
const showAdmin = isAdmin
|
|
const showVerified = isVerified
|
|
const showBug = isBugHunter
|
|
const showBeta = isBetaTester
|
|
|
|
// admin < verified < bug < beta
|
|
if (onlyShowHighest) {
|
|
if (showAdmin) {
|
|
return (
|
|
<BadgeWrapper tooltip="Admin">
|
|
<div className="flex items-center justify-center rounded bg-red-500/10 p-0.5" title="Admin">
|
|
<Crown className={`text-red-500 ${className}`} />
|
|
</div>
|
|
</BadgeWrapper>
|
|
)
|
|
}
|
|
if (showBug) {
|
|
return (
|
|
<BadgeWrapper tooltip="Bug Hunter">
|
|
<div className="flex items-center justify-center rounded bg-orange-500/10 p-0.5" title="Bug Hunter">
|
|
<Bug className={`text-orange-500 ${className}`} />
|
|
</div>
|
|
</BadgeWrapper>
|
|
)
|
|
}
|
|
if (showBeta) {
|
|
return (
|
|
<BadgeWrapper tooltip="Beta Tester">
|
|
<div className="flex items-center justify-center rounded bg-purple-500/10 p-0.5" title="Beta Tester">
|
|
<TestTube2 className={`text-purple-500 ${className}`} />
|
|
</div>
|
|
</BadgeWrapper>
|
|
)
|
|
}
|
|
if (showVerified) {
|
|
return (
|
|
<BadgeWrapper tooltip="Verified">
|
|
<div className="flex items-center justify-center rounded bg-blue-500/10 p-0.5" title="Verified">
|
|
<Check className={`text-blue-500 ${className}`} strokeWidth={4} />
|
|
</div>
|
|
</BadgeWrapper>
|
|
)
|
|
}
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="inline-flex items-center gap-1 align-middle">
|
|
<TooltipProvider delayDuration={0}>
|
|
|
|
{showAdmin && (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div className="flex items-center justify-center rounded bg-red-500/10 p-0.5" title="Admin">
|
|
<Crown className={`text-red-500 ${className}`} />
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Admin</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
|
|
{showVerified && (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div className="flex items-center justify-center rounded bg-blue-500/10 p-0.5" title="Verified">
|
|
<Check className={`text-blue-500 ${className}`} strokeWidth={4} />
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Verified</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
|
|
{showBug && (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div className="flex items-center justify-center rounded bg-orange-500/10 p-0.5" title="Bug Hunter">
|
|
<Bug className={`text-orange-500 ${className}`} />
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Bug Hunter</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
|
|
{showBeta && (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div className="flex items-center justify-center rounded bg-purple-500/10 p-0.5" title="Beta Tester">
|
|
<TestTube2 className={`text-purple-500 ${className}`} />
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Beta Tester</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
|
|
</TooltipProvider>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function BadgeWrapper({ children, tooltip }: { children: React.ReactNode, tooltip: string }) {
|
|
return (
|
|
<TooltipProvider delayDuration={0}>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
{children}
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>{tooltip}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
)
|
|
}
|