35 lines
1.0 KiB
JavaScript
35 lines
1.0 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { BugAntIcon } from '@heroicons/react/24/outline';
|
|
import DebugOverlay from './DebugOverlay';
|
|
|
|
const DebugToggle = () => {
|
|
const [isDebugOpen, setIsDebugOpen] = useState(false);
|
|
|
|
// Only show in development or when debug is enabled
|
|
const shouldShow = import.meta.env.DEV ||
|
|
import.meta.env.VITE_DEBUG_ENABLED === 'true';
|
|
|
|
if (!shouldShow) return null;
|
|
|
|
return (
|
|
<>
|
|
{/* Floating Debug Button */}
|
|
<button
|
|
onClick={() => setIsDebugOpen(true)}
|
|
className="fixed bottom-4 right-4 z-40 flex h-12 w-12 items-center justify-center rounded-full bg-gray-800 text-white shadow-lg hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
|
|
title="Open Debug Panel"
|
|
>
|
|
<BugAntIcon className="h-6 w-6" />
|
|
</button>
|
|
|
|
{/* Debug Overlay */}
|
|
<DebugOverlay
|
|
isOpen={isDebugOpen}
|
|
onClose={() => setIsDebugOpen(false)}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DebugToggle;
|