Basic implementation for anime page

app/components/ui/badge/Badge.vue

@@ -7,20 +7,19 @@ import { Primitive } from "reka-ui"
 import { cn } from "@/lib/utils"
 import { badgeVariants } from "."
 
-const props = defineProps<PrimitiveProps & {
-  variant?: BadgeVariants["variant"]
-  class?: HTMLAttributes["class"]
-}>()
+const props = withDefaults(defineProps<PrimitiveProps & {
+    variant?: BadgeVariants["variant"]
+    size?: BadgeVariants["size"]
+    class?: HTMLAttributes["class"]
+}>(), {
+    size: "default"
+});
 
 const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
-  <Primitive
-    data-slot="badge"
-    :class="cn(badgeVariants({ variant }), props.class)"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </Primitive>
+    <Primitive data-slot="badge" :class="cn(badgeVariants({ variant, size }), props.class)" v-bind="delegatedProps">
+        <slot />
+    </Primitive>
 </template>