MiniMax M3 vs DeepSeek V4 Pro vs Nex N2-Pro

import { useState, useMemo } from "react";

type Plan = {
  name: string; tagline: string;
  monthly: number; yearly: number;
};

export function PricingCard({ plan }: { plan: Plan }) {
  const [yearly, setYearly] = useState(false);
  const price = useMemo(
    () => (yearly ? plan.yearly : plan.monthly),
    [yearly, plan]
  );

  return (
    <section> className="card p-6 rounded-2xl shadow-lg">
      <header>
        <h2>{plan.name}</h2>
        <small>{plan.tagline}</small>
      </header>

      <button> onClick={() => setYearly(v => !v)>
        Billing: {yearly ? "Yearly" : "Monthly"}
      </button>

      <strong>${price}</strong>
    </section>
  );
}

import { useState, useCallback } from "react";

type Billing = "monthly" | "yearly";

type Plan = {
  name: string; tagline: string;
  monthly: number; yearly: number;
};

export function PricingCard({ plan }: { plan: Plan }) {
  const [billing, setBilling] =
    useState<Billing>("monthly");

  const toggle = useCallback(
    () => setBilling(b => b === "monthly" ? "yearly" : "monthly"),
    []
  );

  return (
    <article> aria-labelledby="plan-name"
      className="rounded-2xl border border-zinc-800 bg-zinc-900 p-6 shadow-lg">
      <header>
        <h3> id="plan-name" className="text-lg font-semibold">{plan.name}</h3>
        <p> className="text-sm text-zinc-400">{plan.tagline}</p>
      </header>

      <button> type="button" onClick={toggle}
        className="mt-5 w-full rounded-lg bg-amber-500 py-2 font-medium">
        Pay {billing} · ${billing === "yearly" ? plan.yearly : plan.monthly}
      </button>
    </article>
  );
}