💄 add Pill component

index.d.ts

@@ -7,9 +7,10 @@ declare module '@eliancodes/brutal-ui' {
 
   export function Button(props: ButtonProps): any;
 
-  type CardProps = {
+  type DefaultColorProps = {
     color?: string;
   }
 
-  export function Card(props: CardProps): any;
+  export function Card(props: DefaultColorProps): any;
+  export function Pill(props: DefaultColorProps): any;
 }

index.ts

@@ -1,2 +1,3 @@
 export { default as Button } from './src/components/Button.astro';
-export { default as Card } from './src/components/Card.astro';
+export { default as Card } from './src/components/Card.astro';
+export { default as Pill } from './src/components/Pill.astro';

src/components/Pill.astro

@@ -0,0 +1,39 @@
+---
+interface Props {
+  color?: string;
+}
+import colors from '../config/colors.json';
+
+if (Astro.props.color === undefined) {
+  Astro.props.color =
+    colors.colors[Math.floor(Math.random() * colors.colors.length)];
+}
+
+const { color } = Astro.props;
+---
+
+<style define:vars={{ color: color }}>
+  span.brutal-pill {
+    filter: drop-shadow(3px 3px 0 rgb(0 0 0 / 1));
+    user-select: none;
+    background-color: white;
+    border-radius: 9999px;
+    border: 2px solid black;
+    padding: 0.25rem 0.75rem;
+    transition: all;
+    transition-duration: 0.5s;
+    animation: ease-in-out;
+    font-size: small;
+  }
+
+  span.brutal-pill:hover {
+    filter: drop-shadow(5px 5px 0 rgb(0 0 0 / 1));
+    background-color: var(--color);
+  }
+</style>
+
+<span
+  class="brutal-pill"
+>
+  <slot />
+</span>