fix: move AskIaButton component to work with tailwind

Author: ErwanDecoster

.vitepress/theme/Layout.vue

@@ -1,6 +1,6 @@
 <script setup>
 import DefaultTheme from 'vitepress/theme';
-import AskIaButton from './AskIaButton.vue';
+import AskIaButton from '../../src/components/AskIaButton.vue';
 
 const { Layout } = DefaultTheme;
 </script>

.vitepress/theme/AskIaButton.vue src/components/AskIaButton.vue.vitepress/theme/AskIaButton.vue renamed to src/components/AskIaButton.vue

@@ -5,11 +5,11 @@
   >
     <!-- Split button: main button + dropdown trigger -->
     <div
-      class="flex h-9 cursor-pointer rounded-full bg-[#202123] text-sm font-medium shadow-md"
+      class="flex h-9 cursor-pointer rounded-full bg-neutral-800 text-sm font-medium shadow-md"
     >
       <!-- Main button - launches ChatGPT directly -->
       <a
-        class="flex items-center rounded-l-full px-3 duration-200 hover:bg-[#2d2f31]"
+        class="flex items-center rounded-l-full px-3 duration-200 hover:bg-neutral-700"
         :href="chatGPTLink"
         target="_blank"
         rel="noopener"
@@ -24,7 +24,7 @@
 
       <!-- Dropdown trigger button -->
       <button
-        class="flex w-6 items-center justify-center rounded-r-full border-l border-white/10 p-0 duration-200 hover:bg-[#2d2f31]!"
+        class="flex w-6 items-center justify-center rounded-r-full border-l border-white/10 p-0 duration-200 hover:bg-neutral-700!"
         @click.stop="toggleDropdown"
         aria-label="More options"
       >
@@ -40,11 +40,11 @@
 
     <!-- Dropdown menu -->
     <div
-      class="absolute top-full z-[1000] mt-2 min-w-[280px] rounded-xl border border-[#333] bg-[#1f1f1f] shadow-2xl"
+      class="absolute top-full z-[1000] mt-2 min-w-[280px] rounded-xl border border-neutral-700 bg-neutral-800 shadow-2xl"
       v-show="isDropdownOpen"
     >
       <a
-        class="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-left text-[#e0e0e0] transition-all duration-200 hover:bg-[#2a2a2a] hover:text-white focus:outline-none active:bg-[#333] active:text-white"
+        class="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-left text-neutral-300 transition-all duration-200 hover:bg-neutral-700 hover:text-white focus:outline-none active:bg-neutral-600 active:text-white"
         :href="chatGPTLink"
         target="_blank"
         rel="noopener"
@@ -59,20 +59,20 @@
         </div>
         <div class="flex flex-1 flex-col gap-0.5">
           <div class="text-sm font-medium">Open in ChatGPT</div>
-          <div class="text-xs leading-tight text-[#999]">
+          <div class="text-xs leading-tight text-neutral-400">
             Ask questions about this page
           </div>
         </div>
         <Icon
-          class="flex-shrink-0 text-[#666] transition-colors duration-200 group-hover:text-[#999]"
+          class="flex-shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-400"
           icon="ep:arrow-right"
           height="16"
           width="16"
         />
       </a>
 
       <a
-        class="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-left text-[#e0e0e0] transition-all duration-200 hover:bg-[#2a2a2a] hover:text-white focus:outline-none active:bg-[#333] active:text-white"
+        class="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-left text-neutral-300 transition-all duration-200 hover:bg-neutral-700 hover:text-white focus:outline-none active:bg-neutral-600 active:text-white"
         :href="claudeLink"
         target="_blank"
         rel="noopener"
@@ -87,20 +87,20 @@
         </div>
         <div class="flex flex-1 flex-col gap-0.5">
           <div class="text-sm font-medium">Open in Claude</div>
-          <div class="text-xs leading-tight text-[#999]">
+          <div class="text-xs leading-tight text-neutral-400">
             Ask questions about this page
           </div>
         </div>
         <Icon
-          class="flex-shrink-0 text-[#666] transition-colors duration-200 group-hover:text-[#999]"
+          class="flex-shrink-0 text-neutral-500 transition-colors duration-200 group-hover:text-neutral-400"
           icon="ep:arrow-right"
           height="16"
           width="16"
         />
       </a>
 
       <button
-        class="flex w-full items-center gap-3 rounded-xl px-4! py-3! text-left text-[#e0e0e0] transition-all duration-200 hover:bg-[#2a2a2a]! focus:outline-none active:bg-[#333]! disabled:cursor-not-allowed disabled:opacity-50"
+        class="flex w-full items-center gap-3 rounded-xl px-4! py-3! text-left text-neutral-300 transition-all duration-200 hover:bg-neutral-700! focus:outline-none active:bg-neutral-600! disabled:cursor-not-allowed disabled:opacity-50"
         @click="copyPageContent"
         :disabled="isCopying"
       >
@@ -116,7 +116,7 @@
           <div class="text-sm font-medium">
             {{ isCopying ? 'Copied!' : 'Copy page' }}
           </div>
-          <div class="text-xs leading-tight text-[#999]">
+          <div class="text-xs leading-tight text-neutral-400">
             Copy page as Markdown for LLMs
           </div>
         </div>