feat(config): update page layout

vAHiD55555 · Sep 16, 2023 · 2be357e · 2be357e
1 parent d059ea8
commit 2be357e
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 70 deletions.
diff --git a/src/pages/Config.tsx b/src/pages/Config.tsx
@@ -36,7 +36,7 @@ import {
   setFavDayTheme,
   setFavNightTheme,
   setSelectedEndpoint,
-  setTwemoji,
+  setUseTwemoji,
   useRequest,
   useTwemoji,
 } from '~/signals'
@@ -250,78 +250,69 @@ const ConfigForm = () => {
 const ConfigForXd = () => {
   const [t, { locale }] = useI18n()
 
-  const autoSwitchThemeSubChild = () => (
-    <Show when={autoSwitchTheme()}>
-      <div class="flex flex-col">
-        <ConfigTitle>{t('favDayTheme')}</ConfigTitle>
+  return (
+    <div class="grid grid-cols-2 gap-4">
+      <div class="flex flex-col gap-4">
+        <div>
+          <ConfigTitle>{t('autoSwitchTheme')}</ConfigTitle>
+
+          <input
+            type="checkbox"
+            class="toggle"
+            checked={autoSwitchTheme()}
+            onChange={(e) => setAutoSwitchTheme(e.target.checked)}
+          />
+        </div>
 
-        <select
-          class="select select-bordered w-full max-w-xs"
-          onChange={(e) => setFavDayTheme(e.target.value)}
-        >
-          <For each={themes}>
-            {(theme) => (
-              <option selected={favDayTheme() === theme} value={theme}>
-                {theme}
-              </option>
-            )}
-          </For>
-        </select>
-      </div>
-      <div class="flex flex-col">
-        <ConfigTitle>{t('favNightTheme')}</ConfigTitle>
+        <Show when={autoSwitchTheme()}>
+          <div class="flex flex-col gap-4">
+            <div class="flex flex-col">
+              <ConfigTitle>{t('favDayTheme')}</ConfigTitle>
+
+              <select
+                class="select select-bordered"
+                onChange={(e) => setFavDayTheme(e.target.value)}
+              >
+                <For each={themes}>
+                  {(theme) => (
+                    <option selected={favDayTheme() === theme} value={theme}>
+                      {theme}
+                    </option>
+                  )}
+                </For>
+              </select>
+            </div>
 
-        <select
-          class="select select-bordered w-full max-w-xs"
-          onChange={(e) => setFavNightTheme(e.target.value)}
-        >
-          <For each={themes}>
-            {(theme) => (
-              <option selected={favNightTheme() === theme} value={theme}>
-                {theme}
-              </option>
-            )}
-          </For>
-        </select>
+            <div class="flex flex-col">
+              <ConfigTitle>{t('favNightTheme')}</ConfigTitle>
+
+              <select
+                class="select select-bordered"
+                onChange={(e) => setFavNightTheme(e.target.value)}
+              >
+                <For each={themes}>
+                  {(theme) => (
+                    <option selected={favNightTheme() === theme} value={theme}>
+                      {theme}
+                    </option>
+                  )}
+                </For>
+              </select>
+            </div>
+          </div>
+        </Show>
       </div>
-    </Show>
-  )
 
-  const checkboxList = [
-    {
-      label: t('autoSwitchTheme'),
-      value: autoSwitchTheme,
-      onChange: (value: boolean) => setAutoSwitchTheme(value),
-      subChild: autoSwitchThemeSubChild,
-    },
-    {
-      label: t('useTwemoji'),
-      value: useTwemoji,
-      onChange: setTwemoji,
-    },
-  ]
-
-  return (
-    <div class="grid gap-4">
-      <For each={checkboxList}>
-        {(checkbox) => (
-          <>
-            <div class="flex flex-col">
-              <ConfigTitle>{checkbox.label}</ConfigTitle>
+      <div>
+        <ConfigTitle>{t('useTwemoji')}</ConfigTitle>
 
-              <input
-                type="checkbox"
-                class="toggle"
-                checked={checkbox.value()}
-                onChange={(e) => {
-                  checkbox.onChange(e.target.checked)
-                }}
-              />
-            </div>
-            {checkbox.subChild?.()}
-          </>
-        )}
-      </For>
+        <input
+          type="checkbox"
+          class="toggle"
+          checked={useTwemoji()}
+          onChange={(e) => setUseTwemoji(e.target.checked)}
+        />
+      </div>
 
       <div>
         <Button
@@ -357,7 +348,7 @@ const Versions = () => {
 
 export default () => {
   return (
-    <div class="mx-auto flex w-full max-w-screen-md flex-col gap-4">
+    <div class="mx-auto flex max-w-screen-md flex-col gap-4">
       <DNSQueryForm />
       <ConfigForm />
       <ConfigForXd />

diff --git a/src/signals/config.ts b/src/signals/config.ts
@@ -40,7 +40,7 @@ export const [autoCloseConns, setAutoCloseConns] = makePersisted(
   createSignal(false),
   { name: 'autoCloseConns', storage: localStorage },
 )
-export const [useTwemoji, setTwemoji] = makePersisted(createSignal(true), {
+export const [useTwemoji, setUseTwemoji] = makePersisted(createSignal(true), {
   name: 'useTwemoji',
   storage: localStorage,
 })