<Badge />

// https://devie-ui.com/components/badge
 
import clsx from "clsx";
import React from "react";
import styles from "./Badge.module.scss";
 
type BadgeVariant =
  | "primary"
  | "outline"
  | "danger"
  | "success"
  | "warning"
  | "literalGray"
  | "literalBrown"
  | "literalOrange"
  | "literalYellow"
  | "literalGreen"
  | "literalBlue"
  | "literalPurple"
  | "literalPink"
  | "literalRed";
 
function Badge({
  variant = "outline",
  children,
  className,
  as: Component = "div",
  ...props
}: Badge.Props) {
  const badgeClassName = clsx(
    styles.badge,
    {
      [styles.primary]: variant === "primary",
      [styles.outline]: variant === "outline",
      [styles.danger]: variant === "danger",
      [styles.success]: variant === "success",
      [styles.warning]: variant === "warning",
      [styles.literalGray]: variant === "literalGray",
      [styles.literalBrown]: variant === "literalBrown",
      [styles.literalOrange]: variant === "literalOrange",
      [styles.literalYellow]: variant === "literalYellow",
      [styles.literalGreen]: variant === "literalGreen",
      [styles.literalBlue]: variant === "literalBlue",
      [styles.literalPurple]: variant === "literalPurple",
      [styles.literalPink]: variant === "literalPink",
      [styles.literalRed]: variant === "literalRed",
    },
 
    className,
  );
 
  return React.createElement(
    Component,
    {
      className: badgeClassName,
      ...props,
    },
    children,
  );
}
 
namespace Badge {
  export interface Props extends React.HTMLAttributes<HTMLDivElement> {
    variant?: BadgeVariant;
    as?: React.ElementType;
  }
}
 
export default Badge;