Solving issue #13 feat: add a badge component (#25)

* Made the Badge component and added the props for value, colour and text colour

* feat: badge improved

---------

Co-authored-by: Arpit Singh <[email protected]>
Co-authored-by: Anwarul Islam <[email protected]>

Author: 3 people

src/components/Badge.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    :style="{ backgroundColor: bg, color: color }"
+    class="inline-flex items-center justify-center px-3 py-1 font-semibold hover:bg-opacity-80"
+    :class="[style === 'rounded' ? 'rounded-full' : 'rounded-md', 'transition']"
+  >
+    {{ value }}
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    bg: string
+    color: string
+    value: string
+    style: "rounded" | "pill"
+  }>(),
+  {
+    bg: "#000000",
+    color: "#ffffff",
+    value: "Badge",
+    style: "rounded",
+  },
+)
+</script>
+
+<style scoped>
+div {
+  @apply transition;
+}
+</style>

src/components/index.ts

@@ -2,3 +2,4 @@ export * from "./button"
 export * from "./smart"
 export * from "./modal"
 export * from "./toast"
+export { default as HoppBadge } from "./Badge.vue"

src/stories/Badge.story.vue

@@ -0,0 +1,11 @@
+<template>
+  <Story title="Badge">
+    <Variant title="Single">
+      <HoppBadge />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { HoppBadge } from "../components"
+</script>