Initial commit

components/ControlPanel.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+interface ControlPanelProps {
+  isDualMode: boolean;
+  setDualMode: (val: boolean) => void;
+  isAttached: boolean;
+  setIsAttached: (val: boolean) => void;
+  children?: React.ReactNode;
+}
+
+const ControlPanel: React.FC<ControlPanelProps> = ({
+  isDualMode,
+  setDualMode,
+  isAttached,
+  setIsAttached,
+  children
+}) => {
+  return (
+    <div className="bg-gray-850 p-4 border-b border-gray-800 shadow-md z-20">
+      <div className="flex flex-col md:flex-row gap-4 items-center md:items-stretch">
+        
+        {/* Left Column: Brand & Controls */}
+        <div className="flex flex-col gap-3 shrink-0 md:w-auto">
+            {/* Brand */}
+            <div className="flex items-center gap-3">
+                <div className="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center shadow-lg shadow-indigo-900/50 shrink-0">
+                   <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                   </svg>
+                </div>
+                <div>
+                  <h1 className="text-xl font-bold text-white tracking-tight leading-tight">SerialNexus</h1>
+                  <span className="text-xs text-indigo-400 font-medium block">Bypass & Monitor</span>
+                </div>
+            </div>
+
+             {/* Controls Row */}
+            <div className="flex items-center gap-3">
+                {/* Dual Monitor Toggle */}
+                <div className={`flex items-center gap-3 p-2 pl-3 rounded-lg border transition-all duration-300 w-48 ${
+                isDualMode ? 'bg-gray-900 border-indigo-500/50 shadow-[0_0_15px_rgba(79,70,229,0.1)]' : 'bg-gray-900/50 border-gray-800'
+                }`}>
+                <label className="flex items-center cursor-pointer select-none w-full">
+                    <div className="relative shrink-0">
+                    <input 
+                        type="checkbox" 
+                        className="sr-only" 
+                        checked={isDualMode} 
+                        onChange={(e) => setDualMode(e.target.checked)} 
+                    />
+                    <div className={`block w-9 h-5 rounded-full transition-colors ${isDualMode ? 'bg-indigo-600' : 'bg-gray-700'}`}></div>
+                    <div className={`absolute left-1 top-1 bg-white w-3 h-3 rounded-full transition-transform ${isDualMode ? 'translate-x-4' : 'translate-x-0'}`}></div>
+                    </div>
+                    <div className={`ml-2 text-xs font-bold ${isDualMode ? 'text-indigo-300' : 'text-gray-500'}`}>
+                    DUAL MONITOR
+                    </div>
+                </label>
+                </div>
+
+                {/* Attach Button */}
+                <button
+                    onClick={() => setIsAttached(!isAttached)}
+                    disabled={!isDualMode}
+                    className={`flex items-center justify-center gap-2 px-4 py-2 rounded-lg border text-xs font-bold transition-all duration-300 ${
+                        !isDualMode 
+                            ? 'opacity-50 cursor-not-allowed bg-gray-900 border-gray-800 text-gray-600'
+                            : isAttached
+                                ? 'bg-green-900/30 border-green-500/50 text-green-400 shadow-[0_0_10px_rgba(34,197,94,0.2)]'
+                                : 'bg-gray-900 border-gray-700 text-gray-400 hover:border-gray-500 hover:text-gray-300'
+                    }`}
+                >
+                    <div className={`w-2 h-2 rounded-full ${isAttached && isDualMode ? 'bg-green-500 animate-pulse' : 'bg-gray-600'}`}></div>
+                    {isAttached ? 'ATTACHED' : 'ATTACH'}
+                </button>
+            </div>
+        </div>
+
+        {/* Right Column: Sponsor Space */}
+        <div className="flex-1 w-full flex justify-center md:justify-end items-center">
+           {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ControlPanel;