From 7a27b2a899030c1ffa61c6396bf2005935bef086 Mon Sep 17 00:00:00 2001
From: Marco Kutscha <kutscha.marco@gmail.com>
Date: Sat, 24 Feb 2024 19:03:51 +0100
Subject: [PATCH] [Feat] Added select button (not working yet)

---
 .../components/control-bar/control-bar.tsx    |  4 ++-
 .../components/control-bar/theme-selector.tsx | 36 +++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 snap-client/src/components/control-bar/theme-selector.tsx

diff --git a/snap-client/src/components/control-bar/control-bar.tsx b/snap-client/src/components/control-bar/control-bar.tsx
index 46719d8..bab3a0a 100644
--- a/snap-client/src/components/control-bar/control-bar.tsx
+++ b/snap-client/src/components/control-bar/control-bar.tsx
@@ -1,6 +1,7 @@
 import { ConnectionStatus } from "./connection-status";
 import { ReadyState } from "react-use-websocket";
-
+import ThemeSelector from "./theme-selector";
+                                  
 interface ControlBarProps {
   isCopyButtonDisabled: boolean;
   onCopyClick(): void;
@@ -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>
   );
diff --git a/snap-client/src/components/control-bar/theme-selector.tsx b/snap-client/src/components/control-bar/theme-selector.tsx
new file mode 100644
index 0000000..e062d01
--- /dev/null
+++ b/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;
+