better ux

Author: thinhphoenix

src/components/github-star-button.astro

@@ -2,7 +2,7 @@
 ---
 
 <button
-  class="items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group relative animate-rainbow cursor-pointer border-0 bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(0,100%,63%),hsl(90,100%,63%),hsl(210,100%,63%),hsl(195,100%,63%),hsl(270,100%,63%))] bg-[length:200%] text-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[20%] before:w-[60%] before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(0,100%,63%),hsl(90,100%,63%),hsl(210,100%,63%),hsl(195,100%,63%),hsl(270,100%,63%))] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(0,100%,63%),hsl(90,100%,63%),hsl(210,100%,63%),hsl(195,100%,63%),hsl(270,100%,63%))] h-8 px-3 py-1.5 text-xs inline-flex"
+  class="items-center justify-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group relative animate-rainbow cursor-pointer border-0 bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(0,100%,63%),hsl(90,100%,63%),hsl(210,100%,63%),hsl(195,100%,63%),hsl(270,100%,63%))] bg-[length:200%] text-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[20%] before:w-[60%] before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(0,100%,63%),hsl(90,100%,63%),hsl(210,100%,63%),hsl(195,100%,63%),hsl(270,100%,63%))] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(0,100%,63%),hsl(90,100%,63%),hsl(210,100%,63%),hsl(195,100%,63%),hsl(270,100%,63%))] h-8 px-3 py-1.5 text-xs inline-flex"
   onclick="window.open('https://github.com/ThinhPhoenix/github-pages', '_blank')"
 >
   <div class="flex items-center">

src/components/install-code-block.astro

@@ -21,7 +21,7 @@
           <code class="font-mono text-sm text-gray-300">
             npx <span class="text-blue-400">@thinhphoenix/github-pages</span>
           </code>
-          <button onclick="copyCode('npm-cmd')" class="text-gray-500 hover:text-white transition-colors ml-4">
+          <button onclick="copyCode(this, 'npm-cmd')" class="copy-btn text-gray-500 hover:text-white transition-colors ml-4">
             <i class="ph ph-copy"></i>
           </button>
         </div>
@@ -34,7 +34,7 @@
           <code class="font-mono text-sm text-gray-300">
             bunx <span class="text-blue-400">@thinhphoenix/github-pages</span>
           </code>
-          <button onclick="copyCode('bun-cmd')" class="text-gray-500 hover:text-white transition-colors ml-4">
+          <button onclick="copyCode(this, 'bun-cmd')" class="copy-btn text-gray-500 hover:text-white transition-colors ml-4">
             <i class="ph ph-copy"></i>
           </button>
         </div>
@@ -50,6 +50,12 @@
   </div>
 </div>
 
+<!-- Toast Container -->
+<div id="toast" class="fixed bottom-8 left-1/2 -translate-x-1/2 bg-[#1a1a1a] border border-white/10 text-white px-5 py-3 shadow-2xl flex items-center gap-3 opacity-0 translate-y-4 transition-all duration-300 pointer-events-none z-50">
+  <i class="ph ph-check-circle text-emerald-400 text-lg"></i>
+  <span class="text-sm font-medium">Copied to clipboard!</span>
+</div>
+
 <script is:inline>
   function switchPmTab(pmId) {
     document.querySelectorAll('.pm-tab').forEach(function(tab) {
@@ -71,10 +77,32 @@
     }
   }
 
-  function copyCode(elementId) {
+  function copyCode(btn, elementId) {
     var el = document.getElementById(elementId);
     if (el && el.textContent) {
-      navigator.clipboard.writeText(el.textContent);
+      navigator.clipboard.writeText(el.textContent).then(function() {
+        showToast();
+        
+        var icon = btn.querySelector('i');
+        if (icon) {
+          icon.classList.remove('ph-copy');
+          icon.classList.add('ph-check');
+          setTimeout(function() {
+            icon.classList.remove('ph-check');
+            icon.classList.add('ph-copy');
+          }, 2000);
+        }
+      });
+    }
+  }
+
+  function showToast() {
+    var toast = document.getElementById('toast');
+    if (toast) {
+      toast.classList.remove('opacity-0', 'translate-y-4');
+      setTimeout(function() {
+        toast.classList.add('opacity-0', 'translate-y-4');
+      }, 2000);
     }
   }
 </script>