Unit Pricing

import { UnitPricing } from "@sigil-ui/components";

<UnitPricing
    toggle={<div className="flex border border-[var(--s-border)]"><button type="button" className="bg-[var(--s-primary)] px-4 py-2 text-sm text-[var(--s-primary-contrast)]">Monthly</button><button type="button" className="bg-[var(--s-surface)] px-4 py-2 text-sm text-[var(--s-text)]">Annual</button></div>}
    units={[
      { category: "Build minutes", price: "$0.008", unit: "per minute", footnote: "First 1,000 included" },
      { category: "Storage", price: "$0.12", unit: "per GB / month" },
      { category: "Bandwidth", price: "$0.06", unit: "per GB", badge: "Global" },
    ]}
  />