qrmaster.net

src/components/ui/BillingToggle.tsx

@@ -0,0 +1,38 @@
+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>
+  );
+};