feat: add special button

src/components/categories/donate/donate.module.css

@@ -40,78 +40,6 @@
   }
 
   .button {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: max-content;
-    height: 40px;
-    padding: 0 20px;
     margin: 16px auto 0;
-    overflow: hidden;
-    font-size: var(--font-xsm);
-    font-weight: 500;
-    color: var(--color-neutral-subtle);
-    text-decoration: none;
-    cursor: pointer;
-    background-color: var(--color-neutral-200);
-    border: none;
-    border-radius: 50px;
-    transition: 0.2s;
-
-    &::after {
-      position: absolute;
-      top: 1px;
-      left: 1px;
-      z-index: -1;
-      width: calc(100% - 2px);
-      height: calc(100% - 2px);
-      content: '';
-      background-color: var(--color-neutral-50);
-      border-radius: 100px;
-      transition: inherit;
-    }
-
-    &::before {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      z-index: -2;
-      width: 150%;
-      aspect-ratio: 1 / 1;
-      content: '';
-      background-image: conic-gradient(
-        transparent,
-        transparent,
-        var(--color-neutral-400),
-        transparent,
-        transparent,
-        transparent,
-        transparent,
-        var(--color-neutral-400),
-        transparent,
-        transparent
-      );
-      transform: translate(-50%, -50%);
-      animation-name: shine;
-      animation-duration: 6s;
-      animation-timing-function: linear;
-      animation-iteration-count: infinite;
-    }
-
-    &:hover::after {
-      background-color: var(--color-neutral-100);
-    }
-  }
-}
-
-@keyframes shine {
-  0% {
-    transform: translate(-50%, -50%) rotate(90deg);
-  }
-
-  100% {
-    transform: translate(-50%, -50%) rotate(450deg);
   }
 }

src/components/categories/donate/donate.tsx

@@ -1,5 +1,7 @@
 import { FaCoffee } from 'react-icons/fa/index';
 
+import { SpecialButton } from '@/components/special-button';
+
 import styles from './donate.module.css';
 
 export function Donate() {
@@ -14,14 +16,12 @@ export function Donate() {
 
       <h2 className={styles.title}>Support Me</h2>
       <p className={styles.desc}>Help me keep Moodist ad-free.</p>
-      <a
+      <SpecialButton
         className={styles.button}
         href="https://buymeacoffee.com/remvze"
-        rel="noreferrer"
-        target="_blank"
       >
         Donate Today
-      </a>
+      </SpecialButton>
     </div>
   );
 }

src/components/source/source.module.css

@@ -63,78 +63,6 @@
   }
 
   .button {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: max-content;
-    height: 40px;
-    padding: 0 20px;
     margin: 16px auto 0;
-    overflow: hidden;
-    font-size: var(--font-xsm);
-    font-weight: 500;
-    color: var(--color-neutral-subtle);
-    text-decoration: none;
-    cursor: pointer;
-    background-color: var(--color-neutral-200);
-    border: none;
-    border-radius: 50px;
-    transition: 0.2s;
-
-    &::after {
-      position: absolute;
-      top: 1px;
-      left: 1px;
-      z-index: -1;
-      width: calc(100% - 2px);
-      height: calc(100% - 2px);
-      content: '';
-      background-color: var(--color-neutral-50);
-      border-radius: 100px;
-      transition: inherit;
-    }
-
-    &::before {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      z-index: -2;
-      width: 150%;
-      aspect-ratio: 1 / 1;
-      content: '';
-      background-image: conic-gradient(
-        transparent,
-        transparent,
-        var(--color-neutral-400),
-        transparent,
-        transparent,
-        transparent,
-        transparent,
-        var(--color-neutral-400),
-        transparent,
-        transparent
-      );
-      transform: translate(-50%, -50%);
-      animation-name: shine;
-      animation-duration: 6s;
-      animation-timing-function: linear;
-      animation-iteration-count: infinite;
-    }
-
-    &:hover::after {
-      background-color: var(--color-neutral-100);
-    }
-  }
-}
-
-@keyframes shine {
-  0% {
-    transform: translate(-50%, -50%) rotate(90deg);
-  }
-
-  100% {
-    transform: translate(-50%, -50%) rotate(450deg);
   }
 }

src/components/source/source.tsx

@@ -1,7 +1,9 @@
 import { FaGithub } from 'react-icons/fa/index';
 
+import { Container } from '@/components/container';
+import { SpecialButton } from '@/components/special-button';
+
 import styles from './source.module.css';
-import { Container } from '../container';
 
 export function Source() {
   return (
@@ -17,14 +19,12 @@ export function Source() {
 
           <h2 className={styles.title}>Open Source</h2>
           <p className={styles.desc}>Moodist is free and open-source!</p>
-          <a
+          <SpecialButton
             className={styles.button}
             href="https://github.com/remvze/moodist"
-            rel="noreferrer"
-            target="_blank"
           >
             Source Code
-          </a>
+          </SpecialButton>
         </div>
       </Container>
     </div>

src/components/special-button/index.ts

@@ -0,0 +1 @@
+export { SpecialButton } from './special-button';

src/components/special-button/special-button.module.css

@@ -0,0 +1,74 @@
+.button {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: max-content;
+  height: 40px;
+  padding: 0 20px;
+  overflow: hidden;
+  font-size: var(--font-xsm);
+  font-weight: 500;
+  color: var(--color-neutral-subtle);
+  text-decoration: none;
+  cursor: pointer;
+  background-color: var(--color-neutral-200);
+  border: none;
+  border-radius: 50px;
+  transition: 0.2s;
+
+  &::after {
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    z-index: -1;
+    width: calc(100% - 2px);
+    height: calc(100% - 2px);
+    content: '';
+    background-color: var(--color-neutral-50);
+    border-radius: 100px;
+    transition: inherit;
+  }
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: -2;
+    width: 150%;
+    aspect-ratio: 1 / 1;
+    content: '';
+    background-image: conic-gradient(
+      transparent,
+      transparent,
+      var(--color-neutral-400),
+      transparent,
+      transparent,
+      transparent,
+      transparent,
+      var(--color-neutral-400),
+      transparent,
+      transparent
+    );
+    transform: translate(-50%, -50%);
+    animation-name: shine;
+    animation-duration: 6s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+  }
+
+  &:hover::after {
+    background-color: var(--color-neutral-100);
+  }
+}
+
+@keyframes shine {
+  0% {
+    transform: translate(-50%, -50%) rotate(90deg);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) rotate(450deg);
+  }
+}

src/components/special-button/special-button.tsx

@@ -0,0 +1,26 @@
+import { cn } from '@/helpers/styles';
+
+import styles from './special-button.module.css';
+
+interface SpecialButtonProps {
+  children: React.ReactNode;
+  className?: string;
+  href: string;
+}
+
+export function SpecialButton({
+  children,
+  className,
+  href,
+}: SpecialButtonProps) {
+  return (
+    <a
+      className={cn(styles.button, className)}
+      href={href}
+      rel="noreferrer"
+      target="_blank"
+    >
+      {children}
+    </a>
+  );
+}