Pricing Table

import '@flexprice/ui/style.css';
import { PricingTable, type Plan } from '@flexprice/ui';

const plans: Plan[] = /* fetch + map */;

<PricingTable
  plans={plans}
  billingPeriod={period}
  onBillingPeriodChange={setPeriod}
  billingPeriodOptions={[{ label: 'Monthly', value: 'MONTHLY' }]}
  currency={currency}
  onCurrencyChange={setCurrency}
  currencyOptions={[{ label: 'USD', value: 'USD' }]}
  onSelectPlan={(planId) => router.push(`/checkout/${planId}`)}
/>

import { adaptPlanToCard, filterAndSortPlans } from '@flexprice/ui';

const plans = filterAndSortPlans(plansWithData, 'USD', 'MONTHLY').map((p) =>
  adaptPlanToCard(p, grants)
);