![]() Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/lavocat.quebec/private_html/src/components/ |
import { useState, useEffect } from 'react';
import { getConnectionInfo, isLocalhost, isNetworkConnection } from '@/utils/connection';
const ConnectionSwitcher = () => {
const [connectionInfo, setConnectionInfo] = useState<any>(null);
const [showSwitcher, setShowSwitcher] = useState(false);
useEffect(() => {
const info = getConnectionInfo();
setConnectionInfo(info);
// Only show switcher in development
setShowSwitcher(process.env.NODE_ENV === 'development');
}, []);
if (!showSwitcher || !connectionInfo) {
return null;
}
const currentUrl = window.location.href;
const isLocal = connectionInfo.isLocal;
const isNetwork = connectionInfo.isNetwork;
// Generate alternative URLs
const localhostUrl = currentUrl.replace(window.location.host, 'localhost:3000');
const networkUrl = currentUrl.replace(window.location.host, '10.119.255.188:3000');
return (
<div className="fixed bottom-4 right-4 z-50 bg-white border border-gray-300 rounded-lg shadow-lg p-3 text-sm">
<div className="mb-2 font-medium text-gray-700">
Connection: <span className={`${isLocal ? 'text-blue-600' : isNetwork ? 'text-green-600' : 'text-gray-600'}
{connectionInfo.hostname}
</span>
</div>
<div className="space-y-1">
{!isLocal && (
<a
href={localhostUrl}
className="block px-2 py-1 text-blue-600 hover:bg-blue-50 rounded transition-colors"
>
🏠 Switch to localhost
</a>
)}
{!isNetwork && (
<a
href={networkUrl}
className="block px-2 py-1 text-green-600 hover:bg-green-50 rounded transition-colors"
>
🌐 Switch to network IP
</a>
)}
</div>
<div className="mt-2 pt-2 border-t border-gray-200 text-xs text-gray-500">
<div>Local: Works on this computer</div>
<div>Network: Works on all devices</div>
</div>
</div>
);
};
export default ConnectionSwitcher;