52 lines
2 KiB
TypeScript
52 lines
2 KiB
TypeScript
import { useTranslation } from '@/contexts/language';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
/**
|
|
* "Ways to support" — three purpose-first cards; each scrolls to its rail by id
|
|
* (#support-lightning / #support-silent / #support-angor), so it works anywhere
|
|
* those anchors exist (/supporters and /donate).
|
|
*/
|
|
export function WaysToSupport({
|
|
className,
|
|
active,
|
|
onSelect,
|
|
}: {
|
|
className?: string;
|
|
active?: string;
|
|
onSelect?: (id: string) => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const ways = [
|
|
{ id: 'support-lightning', emoji: '⚡', title: t('walletUi.supporters.wayLightningTitle'), desc: t('walletUi.supporters.wayLightningDesc') },
|
|
{ id: 'support-silent', emoji: '🕵️', title: t('walletUi.supporters.waySilentTitle'), desc: t('walletUi.supporters.waySilentDesc') },
|
|
{ id: 'support-angor', emoji: '⛓', title: t('walletUi.supporters.wayAngorTitle'), desc: t('walletUi.supporters.wayAngorDesc') },
|
|
];
|
|
return (
|
|
<div className={`grid grid-cols-3 gap-2 ${className ?? ''}`}>
|
|
{ways.map((w) => (
|
|
<button
|
|
key={w.id}
|
|
type="button"
|
|
aria-pressed={active === w.id}
|
|
onClick={() => {
|
|
if (onSelect) {
|
|
onSelect(w.id);
|
|
return;
|
|
}
|
|
document.getElementById(w.id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}}
|
|
className={cn(
|
|
'min-h-0 min-w-0 rounded-xl border p-2.5 text-left transition-colors sm:p-3',
|
|
active === w.id
|
|
? 'border-[#ccff00]/60 bg-[#ccff00]/10'
|
|
: 'border-white/10 bg-black/60 hover:border-[#ccff00]/40 hover:bg-white/5',
|
|
)}
|
|
>
|
|
<span className="text-xl">{w.emoji}</span>
|
|
<p className="mt-1 text-[10px] font-black uppercase leading-tight text-white sm:mt-2 sm:text-xs">{w.title}</p>
|
|
<p className="mt-0.5 hidden text-[10px] leading-snug text-gray-400 sm:block">{w.desc}</p>
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|