Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | 1x | /**
* Sandbox Toggle Component
* A toggle switch to switch between Live and Test modes
*/
import React from 'react';
import { useTranslation } from 'react-i18next';
import { FlaskConical, Zap } from 'lucide-react';
interface SandboxToggleProps {
/** Whether sandbox mode is currently active */
isSandbox: boolean;
/** Whether sandbox mode is available for this business */
sandboxEnabled: boolean;
/** Callback when mode is toggled */
onToggle: (enableSandbox: boolean) => void;
/** Whether a toggle operation is in progress */
isToggling?: boolean;
/** Optional additional CSS classes */
className?: string;
}
const SandboxToggle: React.FC<SandboxToggleProps> = ({
isSandbox,
sandboxEnabled,
onToggle,
isToggling = false,
className = '',
}) => {
const { t } = useTranslation();
// Don't render if sandbox is not enabled for this business
if (!sandboxEnabled) {
return null;
}
return (
<div className={`flex items-center ${className}`}>
{/* Live Mode Button */}
<button
onClick={() => onToggle(false)}
disabled={isToggling || !isSandbox}
className={`
flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-l-md
transition-colors duration-150 border
${!isSandbox
? 'bg-green-600 text-white border-green-600'
: 'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
}
${isToggling ? 'opacity-50 cursor-not-allowed' : ''}
`}
title={t('sandbox.liveMode', 'Live Mode - Production data')}
>
<Zap className="w-3.5 h-3.5" />
<span>{t('sandbox.live', 'Live')}</span>
</button>
{/* Test Mode Button */}
<button
onClick={() => onToggle(true)}
disabled={isToggling || isSandbox}
className={`
flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-r-md
transition-colors duration-150 border -ml-px
${isSandbox
? 'bg-orange-500 text-white border-orange-500'
: 'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
}
${isToggling ? 'opacity-50 cursor-not-allowed' : ''}
`}
title={t('sandbox.testMode', 'Test Mode - Sandbox data')}
>
<FlaskConical className="w-3.5 h-3.5" />
<span>{t('sandbox.test', 'Test')}</span>
</button>
</div>
);
};
export default SandboxToggle;
|