got-gaming/components/ui/Badge.tsx

"use client";

import { HTMLAttributes, ReactNode } from "react";

interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  children: ReactNode;
  variant?: "default" | "success" | "warning" | "danger" | "info";
  size?: "xs" | "sm" | "md";
}

const variantClasses = {
  default: "border",
  success: "border",
  warning: "border",
  danger: "border",
  info: "border",
};

const sizeClasses = {
  xs: "px-1.5 py-0.5 text-[9px] sm:text-[10px]",
  sm: "px-2 py-1 text-[10px] sm:text-xs",
  md: "px-3 py-1 text-xs",
};

export default function Badge({
  children,
  variant = "default",
  size = "sm",
  className = "",
  ...props
}: BadgeProps) {
  const variantStyles = {
    default: {
      backgroundColor:
        "color-mix(in srgb, var(--accent-color) 20%, transparent)",
      borderColor: "color-mix(in srgb, var(--accent-color) 50%, transparent)",
      color: "var(--accent-color)",
    },
    success: {
      backgroundColor: "color-mix(in srgb, var(--success) 20%, transparent)",
      borderColor: "color-mix(in srgb, var(--success) 50%, transparent)",
      color: "var(--success)",
    },
    warning: {
      backgroundColor: "color-mix(in srgb, var(--yellow) 20%, transparent)",
      borderColor: "color-mix(in srgb, var(--yellow) 50%, transparent)",
      color: "var(--yellow)",
    },
    danger: {
      backgroundColor:
        "color-mix(in srgb, var(--destructive) 20%, transparent)",
      borderColor: "color-mix(in srgb, var(--destructive) 50%, transparent)",
      color: "var(--destructive)",
    },
    info: {
      backgroundColor: "color-mix(in srgb, var(--blue) 15%, transparent)",
      borderColor: "color-mix(in srgb, var(--blue) 50%, transparent)",
      color: "var(--blue)",
    },
  };

  return (
    <span
      className={`inline-block border uppercase rounded whitespace-nowrap flex-shrink-0 ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
      style={variantStyles[variant]}
      {...props}
    >
      {children}
    </span>
  );
}