30 lines
1.5 KiB
TypeScript
30 lines
1.5 KiB
TypeScript
import { useTranslation } from '@/contexts/language';
|
|
|
|
/**
|
|
* "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 }: { className?: string }) {
|
|
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-1 gap-3 sm:grid-cols-3 ${className ?? ''}`}>
|
|
{ways.map((w) => (
|
|
<button
|
|
key={w.id}
|
|
onClick={() => document.getElementById(w.id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })}
|
|
className="min-h-0 min-w-0 rounded-xl border border-white/10 bg-black/60 p-4 text-left transition-colors hover:border-[#ccff00]/40 hover:bg-white/5"
|
|
>
|
|
<span className="text-2xl">{w.emoji}</span>
|
|
<p className="mt-2 text-sm font-black uppercase text-white">{w.title}</p>
|
|
<p className="mt-1 text-xs text-gray-400">{w.desc}</p>
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|