♻️ make color optional

Author: ElianCodes

index.d.ts

@@ -1,9 +1,8 @@
 declare module '@eliancodes/brutal-ui' {
   type ButtonProps = {
     href: string;
-    target: '_blank' | '_self';
-    color: string;
-    string: string;
+    target?: '_blank' | '_self';
+    color?: string;
   }
 
   export function Button(props: ButtonProps): any;

src/components/Button.astro

@@ -1,34 +1,39 @@
 ---
 interface Props {
   href: string;
-  target: '_blank' | '_self';
-  color: string;
-  string: string;
+  target?: '_blank' | '_self';
+  color?: string;
 }
 
-const colors = await Astro.glob('../config/colors.json')
+import colors from '../config/colors.json';
+
+if (Astro.props.target === undefined) {
+  Astro.props.target = '_self';
+}
+
+if (Astro.props.color === undefined) {
+  Astro.props.color = colors.colors[Math.floor(Math.random() * colors.colors.length)];
+;
+}
 
 const { href, target, color } = Astro.props;
+
 ---
-<style>
-  a.btn {
+<style define:vars={{ color: color}}>
+  a.brutal-btn {
     filter: drop-shadow(5px 5px 0 rgb(0 0 0 / 1));
+    background-color: white;
   }
-  a.btn:hover {
+  a.brutal-btn:hover {
     filter: drop-shadow(3px 3px 0 rgb(0 0 0 / 1));
+    background-color: var(--color);
   }
 </style>
 
 <a
   href={href}
   target={target}
-  class:list={[
-    color
-      ? `hover:bg-${color}`
-      : `hover:bg-${colors[Math.floor(Math.random() * colors.length)]}`,
-    'btn bg-white sanchez inline-block py-2 px-4 border-2 border-black transition-all ease-in-out duration-150',
-  ]}
+  class="brutal-btn sanchez inline-block py-2 px-4 border-2 border-black transition-all ease-in-out duration-150"
 >
-  test
   <slot />
 </a>