You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.4 KiB
45 lines
1.4 KiB
import { |
|
getCanonicalPaytoType, |
|
getPaytoEditorTypeLabel, |
|
getPaytoIconChar, |
|
getPaytoLogoPath, |
|
isLightningPaytoType |
|
} from '@/lib/payto' |
|
import { cn } from '@/lib/utils' |
|
import { Zap as ZapIcon } from 'lucide-react' |
|
|
|
export default function SuperchatPaymentMethodLabel({ |
|
paytoType, |
|
className |
|
}: { |
|
/** Canonical or alias payto type (`lightning`, `monero`, `geyser`, …). */ |
|
paytoType: string |
|
className?: string |
|
}) { |
|
const canonical = getCanonicalPaytoType(paytoType) |
|
const label = getPaytoEditorTypeLabel(canonical) |
|
const logoPath = getPaytoLogoPath(canonical) |
|
const iconChar = getPaytoIconChar(canonical) |
|
const isLightning = isLightningPaytoType(canonical) |
|
|
|
return ( |
|
<span |
|
className={cn( |
|
'inline-flex shrink-0 items-center gap-1 rounded-md border border-border/60 bg-muted/40', |
|
'px-1.5 py-0.5 text-xs font-medium leading-none text-muted-foreground', |
|
className |
|
)} |
|
> |
|
{logoPath ? ( |
|
<img src={logoPath} alt="" className="size-3.5 shrink-0 object-contain" aria-hidden /> |
|
) : isLightning ? ( |
|
<ZapIcon className="size-3.5 shrink-0 text-yellow-400" strokeWidth={2} aria-hidden /> |
|
) : iconChar ? ( |
|
<span className="shrink-0 text-[0.65rem] leading-none" aria-hidden> |
|
{iconChar} |
|
</span> |
|
) : null} |
|
<span className="truncate">{label}</span> |
|
</span> |
|
) |
|
}
|
|
|