44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { Switch } from '@headlessui/react';
|
|
import { useTheme } from '@/lib/theme-context';
|
|
|
|
interface PricingToggleProps {
|
|
isYearly: boolean;
|
|
onToggle: () => void;
|
|
}
|
|
|
|
const PricingToggle: React.FC<PricingToggleProps> = ({ isYearly, onToggle }) => {
|
|
const { theme } = useTheme();
|
|
|
|
const thumbColor = theme === 'dark' ? 'bg-white' : 'bg-gray-900';
|
|
const trackColor = theme === 'dark' ? 'bg-gray-700' : 'bg-gray-200';
|
|
const activeTrackColor = theme === 'dark' ? 'bg-indigo-600' : 'bg-indigo-500';
|
|
|
|
return (
|
|
<div className="flex items-center justify-center mt-12 space-x-4">
|
|
<span className={`text-sm font-medium ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
|
|
Monthly
|
|
</span>
|
|
<div className="relative inline-flex items-center">
|
|
<Switch
|
|
checked={isYearly}
|
|
onChange={onToggle}
|
|
className={`relative inline-flex items-center h-6 rounded-full w-16 transition-colors duration-200 ease-in-out ${
|
|
isYearly ? activeTrackColor : trackColor
|
|
}`}
|
|
>
|
|
<span
|
|
className={`inline-block w-7 h-5 transform rounded-full shadow transition-transform duration-200 ease-in-out ${
|
|
isYearly ? 'translate-x-8' : 'translate-x-0'
|
|
} ${thumbColor}`}
|
|
/>
|
|
</Switch>
|
|
</div>
|
|
<span className={`text-sm font-medium ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
|
|
Yearly
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PricingToggle; |