Initial commit

src/shared/components/Badge.js

@@ -0,0 +1,55 @@
+"use client";
+
+import { cn } from "@/shared/utils/cn";
+
+const variants = {
+  default: "bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300",
+  primary: "bg-primary/10 text-primary",
+  success: "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 border border-green-100 dark:border-green-800/30",
+  warning: "bg-yellow-50 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-500 border border-yellow-100 dark:border-yellow-800/30",
+  error: "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 border border-red-100 dark:border-red-800/30",
+  info: "bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 border border-blue-100 dark:border-blue-800/30",
+};
+
+const sizes = {
+  sm: "px-2 py-0.5 text-[10px]",
+  md: "px-2.5 py-1 text-xs",
+  lg: "px-3 py-1.5 text-sm",
+};
+
+export default function Badge({
+  children,
+  variant = "default",
+  size = "md",
+  dot = false,
+  icon,
+  className,
+}) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full font-semibold",
+        variants[variant],
+        sizes[size],
+        className
+      )}
+    >
+      {dot && (
+        <span
+          className={cn(
+            "size-1.5 rounded-full",
+            variant === "success" && "bg-green-500",
+            variant === "warning" && "bg-yellow-500",
+            variant === "error" && "bg-red-500",
+            variant === "info" && "bg-blue-500",
+            variant === "primary" && "bg-primary",
+            variant === "default" && "bg-gray-500"
+          )}
+        />
+      )}
+      {icon && <span className="material-symbols-outlined text-[14px]">{icon}</span>}
+      {children}
+    </span>
+  );
+}
+