Import repositories from gitlab

next/components/button/index.jsx

@@ -0,0 +1,28 @@
+import styles from './style.module.scss';
+
+export default function Button({as, type, children, ...props}) {
+    switch (as ?? 'a') {
+        case 'a':
+            return (
+                <a
+                    tabIndex="0"
+                    {...props}
+                    className={`${styles[type ?? 'secondary']} ${styles.button} not-a-link ${props.className}`}
+                >
+                    {children}
+                </a>
+            );
+        case 'button':
+            return (
+                <button
+                    tabIndex="0"
+                    {...props}
+                    className={`${styles[type ?? 'secondary']} ${styles.button} not-a-link ${props.className}`}
+                >
+                    {children}
+                </button>
+            );
+
+    }
+    return (null);
+}

next/components/button/style.module.scss

@@ -0,0 +1,47 @@
+.button {
+    appearance: none;
+    font-size: unset;
+    background: unset;
+    font-family: unset;
+    display: inline-block;
+    padding: 1.25rem 1.5rem;
+    border-radius: 2.25rem;
+    text-decoration: none;
+    transition: all 0.2s ease;
+    margin: 0.5rem;
+}
+
+.secondary {
+    color: unset;
+    border: solid 1px var(--fg-2);
+
+    &:hover, &:focus {
+        background: var(--fg-3);
+        border: solid 1px var(--fg-3);
+        box-shadow: 0 0.25rem 0.35rem rgba(0, 0, 0, 0.45);
+    }
+
+    &:visited {
+        color: unset;
+    }
+}
+
+.primary {
+    color: white;
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
+    text-decoration-color: transparent;
+    background: linear-gradient(175deg, var(--fefan-1) 0%, var(--fefan-1) 45%, var(--fefan-2) 55%, var(--fefan-3) 70%, var(--fefan-4) 85%);
+    background-size: 250% 100%;
+    transition: all ease var(--transition-time);
+  
+    &:hover, &:focus {
+      text-decoration-color: var(--fefan-1);
+      background-position-x: 100%;
+      box-shadow: 0 0.25rem 0.35rem rgba(0, 0, 0, 0.45);
+
+    }
+  
+    &:visited {
+      color: white;
+    }
+}