Badge

import React, { FC, ReactNode } from 'react';
 
/**
 * TofuUI Badge 标签
 * @author shuakami
 * @version 1.0.1
 * @copyright ByteFreeze&TofuUI
 */
 
 
interface BadgeProps {
    children: ReactNode;
    rectangle?: boolean;
    theme?: 'tofu-gray' | // 最浅的灰色
        'tofu-red' | // 鲜明的红色
        'tofu-orange' | // 鲜明的橙色
        'tofu-yellow' | // 鲜明的黄色
        'tofu-green' | // 鲜明的绿色
        'tofu-teal' | // 鲜明的绿蓝色
        'tofu-blue' | // 鲜明的蓝色
        'tofu-indigo' | // 鲜明的靛蓝色
        'tofu-purple' | // 鲜明的紫色
        'tofu-pink' | // 鲜明的粉色
        'tofu-brown' | // 鲜明的棕色
        'tofu-cyan' | // 鲜明的青色
        'tofu-lime' | // 鲜明的酸橙色
        'tofu-gradient-red' | // 红黄渐变
        'tofu-gradient-orange' | // 橙黄渐变
        'tofu-gradient-green' | // 绿色渐变
        'tofu-gradient-blue' | // 蓝色渐变
        'tofu-gradient-purple' | // 紫色渐变
        'tofu-gradient-teal' | // 绿蓝渐变
        'tofu-gradient-indigo' | // 靛蓝渐变
        'tofu-gradient-pink' | // 粉色渐变
        'tofu-gradient-brown' | // 棕色渐变
        'tofu-gradient-cyan' | // 青色渐变
        'tofu-gradient-lime'; // 酸橙渐变
    className?: string;
    style?: React.CSSProperties;
    onClick?: () => void;
}
 
const Badge: FC<BadgeProps> = ({ children, theme = 'tofu-gray', className, style,  rectangle = false , onClick }) => {
    const borderRadiusClass = rectangle ? 'rounded-md px-3.5' : 'rounded-full px-3';
    const themeStyles = {
        'tofu-gray': { backgroundColor: '#F7FAFC', color: '#1A202C' },
        'tofu-red': { backgroundColor: 'rgba(255,107,107,0.2)', color: '#FF6B6B' },
        'tofu-orange': { backgroundColor: 'rgba(255, 169, 77, 0.3)', color: '#fd9221' },
        'tofu-yellow': { backgroundColor: 'rgba(255,209,102,0.25)', color: '#d59d15' },
        'tofu-green': { backgroundColor: 'rgba(48,220,53,0.16)', color: '#039855' },
        'tofu-teal': { backgroundColor: 'rgba(102,211,204,0.23)', color: '#18a49c' },
        'tofu-blue': { backgroundColor: 'rgba(33,150,243,0.2)', color: '#2196F3' },
        'tofu-indigo': { backgroundColor: 'rgba(98,88,239,0.24)', color: '#4c42e1' },
        'tofu-purple': { backgroundColor: 'rgba(205,94,255,0.3)', color: '#b507ff' },
        'tofu-pink': { backgroundColor: 'rgba(236,64,122,0.2)', color: '#e32a69' },
        'tofu-brown': { backgroundColor: 'rgba(141,110,99,0.13)', color: '#a26551' },
        'tofu-cyan': { backgroundColor: 'rgba(0,188,212,0.15)', color: '#3da6ad' },
        'tofu-lime': { backgroundColor: 'rgba(205,220,57,0.16)', color: '#858815' },
 
     // 'tofu-test': { backgroundColor: '#e1b375', color: '#eadc9c' },
     //  用来激活IDE调色盘 此注释请勿去除--
 
 
        'tofu-gradient-red': {
            backgroundImage: 'linear-gradient(45deg, #fbe9e7, #ffccbc)',
            color: '#bf360c'
        },
        'tofu-gradient-orange': {
            backgroundImage: 'linear-gradient(45deg, #fff3e0, #ffe0b2)',
            color: '#e65100'
        },
        'tofu-gradient-yellow': {
            backgroundImage: 'linear-gradient(45deg, #fffde7, #fff9c4)',
            color: '#f57f17'
        },
        'tofu-gradient-green': {
            backgroundImage: 'linear-gradient(45deg, #e8f5e9, #c8e6c9)',
            color: '#1b5e20'
        },
        'tofu-gradient-cyan': {
            backgroundImage: 'linear-gradient(45deg, #e0f7fa, #b2ebf2)',
            color: '#006064'
        },
        'tofu-gradient-blue': {
            backgroundImage: 'linear-gradient(120deg, #e3f2fd, #bbdefb)',
            color: '#0d47a1'
        },
        'tofu-gradient-purple': {
            backgroundImage: 'linear-gradient(45deg, #f3e5f5, #e1bee7)',
            color: '#4a148c'
        },
        'tofu-gradient-pink': {
            backgroundImage: 'linear-gradient(125deg, #fce4ec, #f8bbd0)',
            color: '#880e4f'
        },
        'tofu-gradient-brown': {
            backgroundImage: 'linear-gradient(75deg, #efebe9, #d7ccc8)',
            color: '#3e2723'
        },
        'tofu-gradient-teal': {
            backgroundImage: 'linear-gradient(45deg, #e0f2f1, #b2dfdb)',
            color: '#004d40'
        },
        'tofu-gradient-lime': {
            backgroundImage: 'linear-gradient(45deg, #f9fbe7, #f0f4c3)',
            color: '#33691e'
        },
        'tofu-gradient-indigo': {
            backgroundImage: 'linear-gradient(45deg, #e8eaf6, #c5cae9)',
            color: '#1a237e'
        },
 
    };
 
    // @ts-ignore
    const combinedStyles = { ...themeStyles[theme], ...style };
 
    return (
        <div
            className={`inline-flex cursor-pointer items-center ${borderRadiusClass} py-1 text-sm font-medium ${className}`}
            style={combinedStyles}
            onClick={onClick}
        >
            {children}
        </div>
    );
};
 
export default Badge;