mkfain
f66e6e80c1
Splits the guide content same way the FAQ was split:
* Structure (block order, kinds, audience, callout variant, option
grid chips/hrefs) stays in helpContent.ts as a typed array of
GuideBlockStructure descriptors with stable IDs.
* Every user-visible string moves to en.json under guides.donor.*,
guides.activist.*, and guides.shared.* (badge labels, tldr eyebrow,
payment comparison table headers + rows).
PaymentComparisonTable, InlinePaymentBadge, and GuideTLDR call
useTranslation() so a language switch triggers re-render. DonorGuidePage
and ActivistGuidePage already do, so getDonorGuideBlocks /
getActivistGuideBlocks re-run on every render and pick up fresh i18n
values automatically.
This commit lands the en strings only; non-en locales follow in the
next commit.
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import type { PaymentMode } from '@/lib/helpContent';
|
|
|
|
interface InlinePaymentBadgeProps {
|
|
mode: PaymentMode;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Small inline pill that visually distinguishes the two payment options
|
|
* a campaign can accept (public Bitcoin or silent payments) wherever
|
|
* they're mentioned in guide copy or table headers.
|
|
*
|
|
* Public uses the project's primary accent (orange). Silent uses an
|
|
* indigo tint so the two read as visually different at a glance without
|
|
* either looking like a warning state.
|
|
*/
|
|
export function InlinePaymentBadge({ mode, className }: InlinePaymentBadgeProps) {
|
|
const { t } = useTranslation();
|
|
const label = t(`guides.shared.paymentBadge.${mode}`);
|
|
return (
|
|
<span
|
|
className={cn(
|
|
'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold leading-none',
|
|
mode === 'public'
|
|
? 'bg-primary/15 text-primary border border-primary/30'
|
|
: 'bg-indigo-500/15 text-indigo-700 dark:text-indigo-300 border border-indigo-500/30',
|
|
className,
|
|
)}
|
|
>
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|