rename component

src/components/DomeLight.vue

@@ -95,15 +95,22 @@
           color="purple"
           style="opacity: 0.8"
         />
+        <div class="colums q-ma-xl">
+          <q-btn color="secondary" @click="settings = !settings" icon="settings">Settings</q-btn>
+          <SettingDialog :settings-dialog="settings"></SettingDialog>
+        </div>
       </q-card-section>
     </q-card>
   </div>
 </template>
 
 <script setup lang="ts">
-import { watch, reactive } from 'vue';
+import { watch, reactive, ref } from 'vue';
 import type { Light } from 'src/models/Light';
 import { send } from 'src/services/websocket';
+import SettingDialog from 'src/components/SettingDomeLight.vue';
+
+const settings = ref(false);
 
 const light = reactive<Light>({
   State: false,

src/components/SettingDomeLight.vue

@@ -0,0 +1,27 @@
+<template>
+  <q-dialog v-model="settingsDialog">
+    <q-card style="min-width: 300px">
+      <q-card-section>
+        <div class="text-h6">Settings</div>
+      </q-card-section>
+
+      <q-card-section>
+        <q-btn>Normal</q-btn>
+      </q-card-section>
+      <q-card-section> </q-card-section>
+      <q-card-actions align="right">
+        <q-btn flat label="Cancel" v-close-popup />
+        <q-btn flat label="Save" @click="saveSettings" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+const settingsDialog = defineModel<boolean>('settingsDialog', { default: false, required: true });
+
+function saveSettings() {
+  // Save logic here
+  settingsDialog.value = false;
+}
+</script>