From 8ecbb5418bde527b8e06d5c66ccedc1e0d908321 Mon Sep 17 00:00:00 2001
From: suhjae <jwsuh25@kis.ac>
Date: Tue, 3 Sep 2024 15:51:47 +0900
Subject: [PATCH] feat: icon update

---
 app.config.ts       | 178 +++++++++++++++++++++++++-------------------
 layouts/default.vue |  48 +++++++-----
 2 files changed, 128 insertions(+), 98 deletions(-)

diff --git a/app.config.ts b/app.config.ts
index a4486ee..389ce0c 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -1,94 +1,116 @@
 export default defineAppConfig({
-    ui: {
-        primary: "blueScriptBlue",
-        gray: "zinc",
+  ui: {
+    primary: "blueScriptBlue",
+    gray: "zinc",
 
-        button: {
-            rounded: "rounded-full",
-            default: {
-                size: "md",
-                color: "black",
-            },
-        },
+    button: {
+      rounded: "rounded-full",
+      default: {
+        size: "md",
+        color: "black",
+      },
+    },
 
-        kbd: {
-            background: 'bg-slate-100 dark:bg-slate-800',
-            ring: 'ring-1 ring-slate-200 dark:ring-slate-800 ring-inset',
-        },
+    kbd: {
+      background: "bg-slate-100 dark:bg-slate-800",
+      ring: "ring-1 ring-slate-200 dark:ring-slate-800 ring-inset",
+    },
 
-        buttonGroup: {
-            rounded: "rounded-full",
-        },
+    buttonGroup: {
+      rounded: "rounded-full",
+    },
 
-        table: {
-            tr: {
-                base: "",
-                selected: "bg-gray-50 dark:bg-gray-800/50",
-                active: "hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer",
-            },
-            th: {
-                base: "text-left rtl:text-right",
-                padding: "px-4 py-2",
-                color: "text-gray-900 dark:text-white",
-                font: "font-normal",
-                size: "text-sm",
-            },
-            td: {
-                base: "whitespace-nowrap",
-                padding: "px-4 py-2",
-                color: "text-gray-600 dark:text-gray-300",
-                font: "font-normal",
-                size: "text-sm",
-            },
-        },
+    table: {
+      tr: {
+        base: "",
+        selected: "bg-gray-50 dark:bg-gray-800/50",
+        active: "hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer",
+      },
+      th: {
+        base: "text-left rtl:text-right",
+        padding: "px-4 py-2",
+        color: "text-gray-900 dark:text-white",
+        font: "font-normal",
+        size: "text-sm",
+      },
+      td: {
+        base: "whitespace-nowrap",
+        padding: "px-4 py-2",
+        color: "text-gray-600 dark:text-gray-300",
+        font: "font-normal",
+        size: "text-sm",
+      },
+    },
 
-        input: {
-            rounded: "rounded-full",
-            default: {
-                size: "md",
-            },
-        },
+    input: {
+      rounded: "rounded-full",
+      default: {
+        size: "md",
+      },
+    },
 
-        select: {
-            rounded: "rounded-full",
-            default: {
-                size: "md",
-            },
-        },
+    select: {
+      rounded: "rounded-full",
+      default: {
+        size: "md",
+      },
+    },
 
-        textarea: {
-            color: {
-                gray: {
-                    outline: "ring-1 ring-gray-200 dark:ring-gray-800",
-                },
-            },
+    textarea: {
+      color: {
+        gray: {
+          outline: "ring-1 ring-gray-200 dark:ring-gray-800",
         },
+      },
+    },
 
-        header: {
-            wrapper: "border-none backdrop-blur-lg",
+    header: {
+      wrapper: "border-none backdrop-blur-lg",
 
-            links: {
-                wrapper:
-                    "ring-1 ring-gray-300 dark:ring-gray-700 px-3 gap-x-0 rounded-full",
-                base: "py-2 px-4 font-medium transition-colors relative after:absolute after:-bottom-px after:inset-x-2 after:h-px after:rounded-full after:opacity-0 after:bg-gray-900 dark:after:bg-white after:transition-opacity",
-                active: "text-gray-900 dark:text-white after:opacity-100",
-                inactive:
-                    "text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100",
-            },
+      links: {
+        wrapper:
+          "ring-1 ring-gray-300 dark:ring-gray-700 px-3 gap-x-0 rounded-full",
+        base: "py-2 px-4 font-medium transition-colors relative after:absolute after:-bottom-px after:inset-x-2 after:h-px after:rounded-full after:opacity-0 after:bg-gray-900 dark:after:bg-white after:transition-opacity",
+        active: "text-gray-900 dark:text-white after:opacity-100",
+        inactive:
+          "text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100",
+      },
 
-            left: "sm:flex-1",
-            right: "sm:flex-1",
-            panel: {
-                wrapper: "sm:hidden",
-            },
+      left: "sm:flex-1",
+      right: "sm:flex-1",
+      panel: {
+        wrapper: "sm:hidden",
+      },
 
-            button: {
-                base: "sm:hidden",
-                icon: {
-                    open: "i-ph-list",
-                    close: "i-ph-x",
-                },
-            },
+      button: {
+        base: "sm:hidden",
+        icon: {
+          open: "i-ph-list",
+          close: "i-ph-x",
+        },
+      },
+    },
+    commandPalette: {
+      default: {
+        icon: "i-ph-magnifying-glass",
+        loadingIcon: "i-svg-spinners-90-ring",
+        selectedIcon: "i-ph-check",
+        emptyState: {
+          icon: "i-ph-magnifying-glass",
         },
+      },
+    },
+    icons: {
+      dark: "i-ph-moon",
+      light: "i-ph-sun",
+      system: "i-heroicons-computer-desktop-20-solid",
+      search: "i-ph-magnifying-glass",
+      external: "i-heroicons-arrow-up-right-20-solid",
+      chevron: "i-ph-caret-down",
+      hash: "i-heroicons-hashtag-20-solid",
+      menu: "i-heroicons-bars-3-20-solid",
+      close: "i-ph-x",
+      check: "i-heroicons-check-circle-20-solid",
     },
+  },
 });
diff --git a/layouts/default.vue b/layouts/default.vue
index 776e6f1..196e684 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,8 +1,13 @@
 <script setup lang="ts">
-const {t} = useI18n();
+const { t } = useI18n();
 
-const {data: navigation} = await useAsyncData('navigation', () => fetchContentNavigation())
-const {data: files} = useLazyFetch<ParsedContent[]>('/api/search.json', {default: () => [], server: false})
+const { data: navigation } = await useAsyncData("navigation", () =>
+  fetchContentNavigation()
+);
+const { data: files } = useLazyFetch<ParsedContent[]>("/api/search.json", {
+  default: () => [],
+  server: false,
+});
 
 const links = computed(() => [
   {
@@ -20,8 +25,8 @@ const links = computed(() => [
   },
 ]);
 
-provide('navigation', navigation)
-provide('files', files)
+provide("navigation", navigation);
+provide("files", files);
 
 const colorMode = useColorMode();
 const isDark = computed({
@@ -39,41 +44,44 @@ const isDark = computed({
     <template #logo>
       <ClientOnly>
         <img
-            src="~/assets/logo-dark.svg"
-            alt="BlueScript darkmode logo"
-            class="h-8 hover:opacity-90"
-            v-if="isDark"
+          src="~/assets/logo-dark.svg"
+          alt="BlueScript darkmode logo"
+          class="h-8 hover:opacity-90"
+          v-if="isDark"
         />
         <img
-            src="~/assets/logo.svg"
-            alt="BlueScript logo"
-            class="h-8 hover:opacity-90"
-            v-else
+          src="~/assets/logo.svg"
+          alt="BlueScript logo"
+          class="h-8 hover:opacity-90"
+          v-else
         />
       </ClientOnly>
     </template>
 
     <template #center>
-      <UHeaderLinks :links="links" class="hidden sm:flex"/>
+      <UHeaderLinks :links="links" class="hidden sm:flex" />
     </template>
 
     <template #right>
-      <LangSwitcher/>
+      <LangSwitcher />
 
-      <UColorModeButton :icon="isDark ? 'i-ph-moon' : 'i-ph-sun'"/>
+      <UColorModeButton />
     </template>
 
     <template #panel>
-      <UAsideLinks :links="links" class="px-2"/>
+      <UAsideLinks :links="links" class="px-2" />
     </template>
   </UHeader>
 
   <UMain>
-    <slot/>
+    <slot />
   </UMain>
 
-
   <ClientOnly>
-    <LazyUContentSearch :files="files" :navigation="navigation" :links="links"/>
+    <LazyUContentSearch
+      :files="files"
+      :navigation="navigation"
+      :links="links"
+    />
   </ClientOnly>
 </template>