39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface BillingToggleProps {
|
|
value: 'month' | 'year';
|
|
onChange: (value: 'month' | 'year') => void;
|
|
}
|
|
|
|
export const BillingToggle: React.FC<BillingToggleProps> = ({ value, onChange }) => {
|
|
return (
|
|
<div className="inline-flex items-center rounded-lg border border-gray-300 bg-gray-50 p-1">
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange('month')}
|
|
className={cn(
|
|
'px-6 py-2 text-sm font-medium rounded-md transition-all duration-200',
|
|
value === 'month'
|
|
? 'bg-primary-600 text-white shadow-sm'
|
|
: 'bg-transparent text-gray-700 hover:bg-gray-100'
|
|
)}
|
|
>
|
|
Monthly
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange('year')}
|
|
className={cn(
|
|
'px-6 py-2 text-sm font-medium rounded-md transition-all duration-200',
|
|
value === 'year'
|
|
? 'bg-primary-600 text-white shadow-sm'
|
|
: 'bg-transparent text-gray-700 hover:bg-gray-100'
|
|
)}
|
|
>
|
|
Yearly
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|