From 5dc136372b2a4db02cb78504024ca2123ca4790a Mon Sep 17 00:00:00 2001
From: Phojie Rengel <33350692+Phojie@users.noreply.github.com>
Date: Fri, 28 Apr 2023 15:42:23 +0800
Subject: [PATCH] refactor: button creation with v-for to remove redundancy
 (#2020)

---
 components/settings/SettingsColorMode.vue | 48 ++++++++++++-----------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/components/settings/SettingsColorMode.vue b/components/settings/SettingsColorMode.vue
index 3bb99568..823f835d 100644
--- a/components/settings/SettingsColorMode.vue
+++ b/components/settings/SettingsColorMode.vue
@@ -6,36 +6,38 @@ const colorMode = useColorMode()
 function setColorMode(mode: ColorMode) {
   colorMode.preference = mode
 }
+
+const modes = [
+  {
+    icon: 'i-ri-moon-line',
+    label: 'settings.interface.dark_mode',
+    mode: 'dark',
+  },
+  {
+    icon: 'i-ri-sun-line',
+    label: 'settings.interface.light_mode',
+    mode: 'light',
+  },
+  {
+    icon: 'i-ri-computer-line',
+    label: 'settings.interface.system_mode',
+    mode: 'system',
+  },
+] as const
 </script>
 
 <template>
   <div flex="~ gap4 wrap" w-full>
     <button
+      v-for="{ icon, label, mode } in modes"
+      :key="mode"
       btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap
-      :tabindex="colorMode.preference === 'dark' ? 0 : -1"
-      :class="colorMode.preference === 'dark' ? 'pointer-events-none' : 'filter-saturate-0'"
-      @click="setColorMode('dark')"
+      :tabindex="colorMode.preference === mode ? 0 : -1"
+      :class="colorMode.preference === mode ? 'pointer-events-none' : 'filter-saturate-0'"
+      @click="setColorMode(mode)"
     >
-      <div i-ri:moon-line />
-      {{ $t('settings.interface.dark_mode') }}
-    </button>
-    <button
-      btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap
-      :tabindex="colorMode.preference === 'light' ? 0 : -1"
-      :class="colorMode.preference === 'light' ? 'pointer-events-none' : 'filter-saturate-0'"
-      @click="setColorMode('light')"
-    >
-      <div i-ri:sun-line />
-      {{ $t('settings.interface.light_mode') }}
-    </button>
-    <button
-      btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap
-      :tabindex="colorMode.preference === 'system' ? 0 : -1"
-      :class="colorMode.preference === 'system' ? 'pointer-events-none' : 'filter-saturate-0'"
-      @click="setColorMode('system')"
-    >
-      <div i-ri:computer-line />
-      {{ $t('settings.interface.system_mode') }}
+      <span :class="`${icon}`" />
+      {{ $t(label) }}
     </button>
   </div>
 </template>