40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
// components/pricing/BillingToggle.tsx
|
|
"use client";
|
|
|
|
import clsx from "clsx";
|
|
|
|
type Billing = "monthly" | "yearly";
|
|
|
|
export default function BillingToggle({
|
|
value,
|
|
onChange,
|
|
}: {
|
|
value: Billing;
|
|
onChange: (v: Billing) => void;
|
|
}) {
|
|
return (
|
|
<div className="mx-auto mb-8 flex w-fit items-center gap-2 rounded-full border border-gray-200 p-1">
|
|
<button
|
|
onClick={() => onChange("monthly")}
|
|
className={clsx(
|
|
"rounded-full px-4 py-2 text-sm transition",
|
|
value === "monthly" ? "bg-gray-900 text-white" : "text-gray-600 hover:bg-gray-100"
|
|
)}
|
|
aria-pressed={value === "monthly"}
|
|
>
|
|
Monthly
|
|
</button>
|
|
<button
|
|
onClick={() => onChange("yearly")}
|
|
className={clsx(
|
|
"rounded-full px-4 py-2 text-sm transition",
|
|
value === "yearly" ? "bg-gray-900 text-white" : "text-gray-600 hover:bg-gray-100"
|
|
)}
|
|
aria-pressed={value === "yearly"}
|
|
>
|
|
Yearly <span className="ml-1 rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-700">Save 10%</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|