added badge variants

Author: ariflogs

config/components.ts

@@ -14,6 +14,10 @@ export const componentConfig = {
       name: "avatar",
       filePath: "packages/ui/Avatars/Avatar.tsx",
     },
+    badge: {
+      name: "badge",
+      filePath: "packages/ui/Badges/Badge.tsx",
+    },
     button: {
       name: "button",
       filePath: "packages/ui/Buttons/Button.tsx",
@@ -85,20 +89,20 @@ export const componentConfig = {
       filePath: "preview/components/badge-style-default.tsx",
       preview: lazy(() => import("@/preview/components/badge-style-default")),
     },
-    "badge-style-success": {
-      name: "badge-style-default",
-      filePath: "preview/components/badge-style-success.tsx",
-      preview: lazy(() => import("@/preview/components/badge-style-success")),
+    "badge-style-variants": {
+      name: "badge-style-variants",
+      filePath: "preview/components/badge-style-variants.tsx",
+      preview: lazy(() => import("@/preview/components/badge-style-variants")),
     },
-    "badge-style-error": {
+    "badge-style-rounded": {
       name: "badge-style-default",
-      filePath: "preview/components/badge-style-error.tsx",
-      preview: lazy(() => import("@/preview/components/badge-style-error")),
+      filePath: "preview/components/badge-style-rounded.tsx",
+      preview: lazy(() => import("@/preview/components/badge-style-rounded")),
     },
-    "badge-style-filled": {
-      name: "badge-style-default",
-      filePath: "preview/components/badge-style-filled.tsx",
-      preview: lazy(() => import("@/preview/components/badge-style-filled")),
+    "badge-style-sizes": {
+      name: "badge-style-sizes",
+      filePath: "preview/components/badge-style-sizes.tsx",
+      preview: lazy(() => import("@/preview/components/badge-style-sizes")),
     },
     "button-style-default": {
       name: "button-style-default",

content/docs/components/badge.mdx

@@ -1,35 +1,51 @@
 ---
 title: Badge
 description: The component that looks like a button but isn't clickable!
-lastUpdated: 08 Oct, 2024
+lastUpdated: 30 Oct, 2024
 ---
 
-### Default
+<ComponentShowcase name="badge-style-default" />
+<br />
+<br />
+
+## Installation
+
+#### 1. Install dependencies:
+
+```sh
+npm install class-variance-authority
+```
 
-<hr />
 <br />
-<ComponentShowcase name="badge-style-default" />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="badge" />
 <br />
 <br />
 
-### Success
+### Default
 
 <hr />
 <br />
-<ComponentShowcase name="badge-style-success" />
+<ComponentShowcase name="badge-style-default" />
 <br />
 <br />
 
-### Error
+### Variants
 
 <hr />
 <br />
-<ComponentShowcase name="badge-style-error" />
+<ComponentShowcase name="badge-style-variants" />
 <br />
 <br />
 
-### Filled
+### Rounded
 
-<hr />
+<ComponentShowcase name="badge-style-rounded" />
+<br />
 <br />
-<ComponentShowcase name="badge-style-filled" />
+
+### Sizes
+
+<ComponentShowcase name="badge-style-sizes" />

packages/ui/Badges/Badge.tsx

@@ -5,15 +5,15 @@ import React, { HTMLAttributes } from "react";
 const badgeVariants = cva("font-semibold ", {
   variants: {
     variant: {
-      default: "border-2 border-black text-black",
-      error: "border-2 border-red-600 text-red-600",
-      success: "border-2 border-green-600 text-green-600",
-      filled: "bg-purple-200 text-purple-600 rounded",
+      default: "bg-gray-300 text-gray-700",
+      outline: "outline outline-2 outline-black text-black",
+      solid: "bg-black text-white",
+      surface: "outline outline-2 bg-primary-300 text-black",
     },
     size: {
-      sm: "px-2 py-.5 text-xs",
-      md: "px-2.5 py-1 text-sm",
-      lg: "px-3 py-1.5 text-base",
+      sm: "px-2 py-1 text-xs",
+      md: "px-2.5 py-1.5 text-sm",
+      lg: "px-3 py-2 text-base",
     },
   },
   defaultVariants: {

preview/components/badge-style-default.tsx

@@ -1,7 +1,5 @@
+import { Badge } from "@/packages/ui";
+
 export default function BadgeStyleDefault() {
-  return (
-    <span className="px-2.5 py-1 text-sm font-semibold border-2 border-black text-black">
-      Default Badge
-    </span>
-  );
+  return <Badge>Default Badge</Badge>;
 }

preview/components/badge-style-error.tsx

@@ -0,0 +1,14 @@
+import { Badge } from "@/packages/ui";
+
+export default function BadgeStyleRounded() {
+  return (
+    <div className="space-x-4">
+      <Badge variant="solid" className="rounded">
+        Rounded
+      </Badge>
+      <Badge variant="solid" className="rounded-full">
+        Full
+      </Badge>
+    </div>
+  );
+}

preview/components/badge-style-filled.tsx

@@ -0,0 +1,11 @@
+import { Badge } from "@/packages/ui";
+
+export default function BadgeStyleVariants() {
+  return (
+    <div className="space-x-4">
+      <Badge size="sm">small</Badge>
+      <Badge>medium</Badge>
+      <Badge size="lg">large</Badge>
+    </div>
+  );
+}

preview/components/badge-style-rounded.tsx

@@ -0,0 +1,12 @@
+import { Badge } from "@/packages/ui";
+
+export default function BadgeStyleVariants() {
+  return (
+    <div className="space-x-4">
+      <Badge>Default</Badge>
+      <Badge variant="outline">Outlined</Badge>
+      <Badge variant="solid">Solid</Badge>
+      <Badge variant="surface">Surface</Badge>
+    </div>
+  );
+}