forked from mrwyndham/fastpocket
37 lines
1011 B
TypeScript
37 lines
1011 B
TypeScript
import { ChangeEventHandler } from "react";
|
|
|
|
export default function PriceToggle({
|
|
isAnnual,
|
|
onChange,
|
|
}: {
|
|
isAnnual: boolean;
|
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
}) {
|
|
return (
|
|
<>
|
|
<label className="shadow-card relative inline-flex cursor-pointer select-none items-center justify-center rounded-lg bg-base-100 p-1">
|
|
<input
|
|
type="checkbox"
|
|
className="sr-only"
|
|
checked={isAnnual}
|
|
onChange={onChange}
|
|
/>
|
|
<span
|
|
className={`flex items-center space-x-[6px] rounded py-2 px-[18px] text-sm font-medium ${
|
|
!isAnnual ? " bg-secondary" : "text-secondary-content"
|
|
}`}
|
|
>
|
|
Monthly Billing
|
|
</span>
|
|
<span
|
|
className={`flex items-center space-x-[6px] rounded py-2 px-[18px] text-sm font-medium ${
|
|
isAnnual ? " bg-secondary" : "text-secondary-content"
|
|
}`}
|
|
>
|
|
Yearly Billing
|
|
</span>
|
|
</label>
|
|
</>
|
|
);
|
|
}
|