[Feat] Added select button (not working yet)

snap-client/src/components/control-bar/control-bar.tsx

@@ -1,5 +1,6 @@
 import { ConnectionStatus } from "./connection-status";
 import { ReadyState } from "react-use-websocket";
+import ThemeSelector from "./theme-selector";
                                   
 interface ControlBarProps {
   isCopyButtonDisabled: boolean;
@@ -59,6 +60,7 @@ export const ControlBar = ({
             <path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
           </svg>{" "}
         </button>
+      <ThemeSelector />
       </div>
     </div>
   );

snap-client/src/components/control-bar/theme-selector.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+
+const ThemeSelector = () => {
+    const [theme, setTheme] = useState('theme1');
+
+    const handleThemeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        setTheme(event.target.value);
+        console.log('Theme Changed:', event.target.value);
+        // Implement functionality to change theme here
+    };
+
+    return (
+        <div className="theme-dropdown">
+            <select 
+              value={theme} 
+              onChange={handleThemeChange}
+              className="text-white py-2 px-4 rounded-md focus:outline-none mr-1"
+              style={{ 
+              backgroundColor: '#191e24', 
+              margin: '0.25rem', 
+              paddingLeft: '1rem', paddingRight: '1rem', 
+              height: '3rem',
+              fontFamily: 'inherit',
+              fontSize: '0.875rem',
+              fontWeight: '600',
+              color: 'hsl(220 13% 69%)' }}
+              >
+                <option value="theme1">Theme 1</option>
+                <option value="theme2">Theme 2</option>
+            </select>
+        </div>
+    );
+};
+
+export default ThemeSelector;
+