41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { HTMLAttributes, ReactNode } from "react";
|
|
|
|
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
children: ReactNode;
|
|
variant?: "default" | "success" | "warning" | "danger" | "info";
|
|
size?: "sm" | "md";
|
|
}
|
|
|
|
const variantClasses = {
|
|
default: "bg-pixel-gold/20 border-pixel-gold/50 text-pixel-gold",
|
|
success: "bg-green-900/50 border-green-500/50 text-green-400",
|
|
warning: "bg-yellow-900/50 border-yellow-500/50 text-yellow-400",
|
|
danger: "bg-red-900/50 border-red-500/50 text-red-400",
|
|
info: "bg-blue-900/30 border-blue-500/50 text-blue-400",
|
|
};
|
|
|
|
const sizeClasses = {
|
|
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) {
|
|
return (
|
|
<span
|
|
className={`inline-block border uppercase rounded whitespace-nowrap flex-shrink-0 ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
|