From dc199d803fdf7b29281089244db2040963feb571 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 7 Aug 2024 20:24:17 +0200
Subject: [PATCH] Added glow prop to button

---
 src/components/Button.astro | 105 +++++++++++++++++++++---------------
 src/pages/index.astro       |  33 +++++++-----
 2 files changed, 83 insertions(+), 55 deletions(-)

diff --git a/src/components/Button.astro b/src/components/Button.astro
index 185cba7..8ab204a 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -1,12 +1,29 @@
-<button class="relative py-2 px-6 bg-slate-900 rounded-[100vmax] text-sm">
+---
+interface Props {
+  glow?: boolean;
+}
+
+const { glow = false } = Astro.props;
+---
+
+<button
+  class="relative py-2 px-6 flex items-center gap-[0.5ch] rounded-[100vmax] text-sm bg-slate-900 hover:bg-slate-800 transition-colors"
+  class:list={
+    [
+      {
+        'glow': glow
+      }
+    ]
+  }
+>
   <slot />
 </button>
 
 <style lang="scss">
 :root {
-  --stop-1: #022c22;
-  --stop-2: #34d399;
-  --stop-3: #ecfdf5;
+  --glow-shade-1: #022c22;
+  --glow-shade-2: #34d399;
+  --glow-shade-3: #ecfdf5;
 }
 
 @property --gradient-angle {
@@ -15,46 +32,48 @@
   inherits: false;
 }
 
-button::before,
-button::after {
-  content: "";
-  position: absolute;
-  inset: -1px;
-  z-index: -1;
-  background: conic-gradient(
-    from var(--gradient-angle),
-    var(--stop-1),
-    var(--stop-1),
-    var(--stop-1),
-    var(--stop-1),
-    var(--stop-1),
-    var(--stop-1),
-    var(--stop-1),
-    var(--stop-2),
-    var(--stop-3),
-    var(--stop-2),
-    var(--stop-1),
-    var(--stop-1),
-    var(--stop-1),
-    var(--stop-1),
-    var(--stop-1),
-    var(--stop-1),
-    var(--stop-1)
-  );
-  border-radius: inherit;
-  animation: rotation 4.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
-}
-
-button::after {
-  filter: blur(3.5rem);
-}
-
-@keyframes rotation {
-  0% {
-    --gradient-angle: -180deg;
+button.glow {
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    z-index: -1;
+    background: conic-gradient(
+      from var(--gradient-angle),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-2),
+      var(--glow-shade-3),
+      var(--glow-shade-2),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1),
+      var(--glow-shade-1)
+    );
+    border-radius: inherit;
+    animation: glow-rotation 4.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
   }
-  100% {
-    --gradient-angle: 180deg;
+
+  &::after {
+    filter: blur(3.5rem);
+  }
+
+  @keyframes glow-rotation {
+    0% {
+      --gradient-angle: -180deg;
+    }
+    100% {
+      --gradient-angle: 180deg;
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c6da120..f1d6cce 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -15,18 +15,34 @@ import Layout from '../layouts/Layout.astro';
   
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam sint placeat dolores nemo asperiores minus, quam commodi cum?</p>
 
-          <div>
+          <div class="flex items-center justify-center gap-2">
+            <Button glow>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF" viewBox="0 0 256 256">
+                <path d="M208.31,75.68A59.78,59.78,0,0,0,202.93,28,8,8,0,0,0,196,24a59.75,59.75,0,0,0-48,24H124A59.75,59.75,0,0,0,76,24a8,8,0,0,0-6.93,4,59.78,59.78,0,0,0-5.38,47.68A58.14,58.14,0,0,0,56,104v8a56.06,56.06,0,0,0,48.44,55.47A39.8,39.8,0,0,0,96,192v8H72a24,24,0,0,1-24-24A40,40,0,0,0,8,136a8,8,0,0,0,0,16,24,24,0,0,1,24,24,40,40,0,0,0,40,40H96v16a8,8,0,0,0,16,0V192a24,24,0,0,1,48,0v40a8,8,0,0,0,16,0V192a39.8,39.8,0,0,0-8.44-24.53A56.06,56.06,0,0,0,216,112v-8A58.14,58.14,0,0,0,208.31,75.68ZM200,112a40,40,0,0,1-40,40H112a40,40,0,0,1-40-40v-8a41.74,41.74,0,0,1,6.9-22.48A8,8,0,0,0,80,73.83a43.81,43.81,0,0,1,.79-33.58,43.88,43.88,0,0,1,32.32,20.06A8,8,0,0,0,119.82,64h32.35a8,8,0,0,0,6.74-3.69,43.87,43.87,0,0,1,32.32-20.06A43.81,43.81,0,0,1,192,73.83a8.09,8.09,0,0,0,1,7.65A41.72,41.72,0,0,1,200,104Z" />
+              </svg>
+
+              <span>
+                Github
+              </span>
+            </Button>
+
             <Button>
-              Test
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF" viewBox="0 0 256 256">
+                <path d="M132,24A100.11,100.11,0,0,0,32,124v84a16,16,0,0,0,16,16h84a100,100,0,0,0,0-200Zm0,184H48V124a84,84,0,1,1,84,84Zm12-80a12,12,0,1,1-12-12A12,12,0,0,1,144,128Zm-44,0a12,12,0,1,1-12-12A12,12,0,0,1,100,128Zm88,0a12,12,0,1,1-12-12A12,12,0,0,1,188,128Z" />
+              </svg>
+
+              <span>
+                Contact
+              </span>
             </Button>
           </div>
         </div>
       </div>
 
       <div class="absolute inset-0 -z-30 isolate">
-        <div id="shape-filter"></div>
-        <div id="shape" class="bg-gradient-to-tr from-emerald-500 from-35% via-indigo-500 via-70% to-fuchsia-500 to-100% opacity-20 contrast-more:opacity-15"></div>
-        <div id="spotlight" class="bg-gradient-to-tr from-lime-500 from-35% via-green-500 via-70% to-emerald-500 to-100% opacity-40 contrast-more:opacity-25"></div>
+        <div id="shape-filter" class="h-full w-full relative z-10"></div>
+        <div id="shape" class="rounded-full aspect-square bg-gradient-to-tr from-emerald-500 from-35% via-indigo-500 via-70% to-fuchsia-500 to-100% opacity-20 contrast-more:opacity-15 will-change-transform"></div>
+        <div id="spotlight" class="rounded-full aspect-square bg-gradient-to-tr from-lime-500 from-35% via-green-500 via-70% to-emerald-500 to-100% opacity-40 contrast-more:opacity-25 will-change-transform"></div>
       </div>
 
       <div
@@ -110,10 +126,6 @@ document.addEventListener('mousemove', throttle((event) => {
 }
 
 #shape-filter {
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  z-index: 2;
   backdrop-filter: blur(10vmax);
 }
 
@@ -124,9 +136,6 @@ document.addEventListener('mousemove', throttle((event) => {
   left: 50%;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
-  border-radius: 50%;
-  aspect-ratio: 1;
   animation: shape-spin 13s infinite;
-  will-change: transform, scroll-position;
 }
 </style>