39 lines
1.8 KiB
TypeScript
39 lines
1.8 KiB
TypeScript
import { ExternalLink } from 'lucide-react';
|
|
import { useTranslation } from '@/contexts/language';
|
|
|
|
export const ANGOR_PROJECT_URL = 'https://angor.io/project/angor1qtunna00uqyx52rr0nvqa059z2gknhrmn7urd6z';
|
|
|
|
/**
|
|
* The "Fund the build on Angor" box — a reusable rail card (used on /supporters
|
|
* and /donate). `count` adds the "Join N supporters" line when known.
|
|
*/
|
|
export function AngorProjectCard({ count, className }: { count?: number; className?: string }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className={`rounded-2xl border-2 border-[#f7931a]/30 bg-black/60 p-8 text-center ${className ?? ''}`}>
|
|
<div className="mb-4 text-5xl">🧡⚡</div>
|
|
<h3 className="mb-2 text-xl font-black uppercase text-white">{t('walletUi.supporters.backTitle')}</h3>
|
|
<p className="mx-auto mb-6 max-w-lg text-sm leading-relaxed text-gray-400">
|
|
{t('walletUi.supporters.backDesc')}
|
|
</p>
|
|
<div className="flex flex-wrap items-center justify-center gap-3">
|
|
<a
|
|
href={ANGOR_PROJECT_URL}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-2 rounded-full border-2 border-[#f7931a]/40 px-5 py-2.5 text-sm font-bold text-[#f7931a] transition-all hover:bg-[#f7931a]/10"
|
|
>
|
|
<ExternalLink className="h-4 w-4" />
|
|
{t('walletUi.supporters.openAngor')}
|
|
</a>
|
|
<span className="text-xs text-gray-500">{t('walletUi.supporters.orZap')}</span>
|
|
</div>
|
|
<p className="mt-4 text-xs text-gray-500">{t('walletUi.supporters.donateNote')}</p>
|
|
{typeof count === 'number' && count > 0 && (
|
|
<p className="mt-2 text-center text-xs font-bold text-[#22d3ee]">
|
|
{t('walletUi.supporters.joinSupporters', { count })}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|