chore: use iconify componernt

selemondev · Oct 12, 2024 · 06ac35e · 06ac35e
1 parent 46717d3
commit 06ac35e
Showing 1 changed file with 23 additions and 9 deletions.
diff --git a/docs/.vitepress/components/demo-block/src/index.vue b/docs/.vitepress/components/demo-block/src/index.vue
@@ -52,33 +52,47 @@ function handleRefreshComponent() {
           '[mask-image:radial-gradient(600px_circle_at_center,white,transparent)]',
         )"
       />
-      <button type="button" class="absolute right-6 text-black top-2 hover:bg-[#F4F4F5] dark:hover:bg-[#27272A] p-2 rounded-md" @click="handleRefreshComponent">
-        <Icon
-          icon="ic:round-replay" class="text-black w-5 h-5 dark:text-white"
-        />
+      <button
+        type="button"
+        class="absolute right-6 text-black top-2 hover:bg-[#F4F4F5] dark:hover:bg-[#27272A] p-2 rounded-md"
+        @click="handleRefreshComponent"
+      >
+        <Icon icon="ic:round-replay" class="text-black w-5 h-5 dark:text-white" />
       </button>
-      <div :class="[vitePressData.page.value.filePath === 'index.md' ? 'md:w-3/4' : 'md:w-6/7']" class="relative w-[90%] h-[500px] py-6">
-        <div class="border-child bg-white shadow-lg dark:bg-black relative rounded-md w-full h-full flex items-center justify-center dark:border-none">
+      <div
+        :class="[vitePressData.page.value.filePath === 'index.md' ? 'md:w-3/4' : 'md:w-6/7']"
+        class="relative w-[90%] h-[500px] py-6"
+      >
+        <div
+          class="border-child bg-white shadow-lg dark:bg-black relative rounded-md w-full h-full flex items-center justify-center dark:border-none"
+        >
           <p class="z-10">
             <slot :key="refreshKey" />
           </p>
         </div>
+
         <div v-if="vitePressData.page.value.filePath !== 'index.md'" class="relative">
           <div class="flex justify-end pt-3 gap-2">
             <a class="o-demo_action_item" group :href="github" target="_blank">
-              <div class="o-demo_action_icon i-carbon-logo-github" />
+              <div class="o-demo_action_icon">
+                <Icon icon="carbon:logo-github" />
+              </div>
               <div class="o-demo_tooltip" group-hover:opacity-100>
                 Edit on GitHub
               </div>
             </a>
             <a class="o-demo_action_item" group @click="copy()">
-              <div class="o-demo_action_icon i-carbon:copy" />
+              <div class="o-demo_action_icon">
+                <Icon icon="carbon:copy" />
+              </div>
               <div class="o-demo_tooltip" group-hover:opacity-100>
                 {{ copied ? 'Copied' : 'Copy code' }}
               </div>
             </a>
             <a class="o-demo_action_item" group @click="toggle()">
-              <div class="o-demo_action_icon i-carbon:fit-to-width" />
+              <div class="o-demo_action_icon">
+                <Icon icon="carbon:fit-to-width" />
+              </div>
               <div class="o-demo_tooltip" group-hover:opacity-100>
                 {{ value ? 'Hide code' : 'Show code' }}
               </div>