hykocx
cd6064b98f
- add `dot` and `onRemove` props to Badge for colored dot and removable tag support - delete RoleBadge component in favor of Badge with dot prop - update UserCreateModal, UserEditModal, and UsersPage to use Badge instead of RoleBadge - remove RoleBadge export from shared components index
98 lines
4.0 KiB
JavaScript
98 lines
4.0 KiB
JavaScript
'use client';
|
||
|
||
import React from 'react';
|
||
|
||
const Badge = ({
|
||
children,
|
||
variant = 'default',
|
||
size = 'sm',
|
||
color = null,
|
||
dot = false,
|
||
onRemove,
|
||
className = '',
|
||
...props
|
||
}) => {
|
||
const baseClassName = 'inline-flex items-center gap-1 font-medium border font-ibm-plex-mono';
|
||
|
||
const variants = {
|
||
default: 'bg-neutral-700/10 text-neutral-700 border-neutral-800/30 dark:bg-neutral-600/10 dark:text-neutral-400 dark:border-neutral-800',
|
||
primary: 'bg-blue-700/10 text-blue-700 border-blue-800/30 dark:bg-blue-600/10 dark:text-blue-600 dark:border-blue-600/20',
|
||
success: 'bg-green-700/10 text-green-700 border-green-800/30 dark:bg-green-600/10 dark:text-green-600 dark:border-green-600/20',
|
||
warning: 'bg-yellow-700/10 text-yellow-700 border-yellow-800/30 dark:bg-yellow-600/10 dark:text-yellow-600 dark:border-yellow-600/20',
|
||
danger: 'bg-red-700/10 text-red-700 border-red-800/30 dark:bg-red-600/10 dark:text-red-600 dark:border-red-600/20',
|
||
info: 'bg-cyan-700/10 text-cyan-700 border-cyan-800/30 dark:bg-cyan-600/10 dark:text-cyan-600 dark:border-cyan-600/20',
|
||
purple: 'bg-purple-700/10 text-purple-700 border-purple-800/30 dark:bg-purple-600/10 dark:text-purple-600 dark:border-purple-600/20',
|
||
pink: 'bg-pink-700/10 text-pink-700 border-pink-800/30 dark:bg-pink-600/10 dark:text-pink-600 dark:border-pink-600/20',
|
||
orange: 'bg-orange-700/10 text-orange-700 border-orange-800/30 dark:bg-orange-600/10 dark:text-orange-600 dark:border-orange-600/20'
|
||
};
|
||
|
||
const sizes = {
|
||
sm: 'px-[8px] py-[2px] rounded-full text-[11px]',
|
||
md: 'px-[8px] py-[2px] rounded-full text-[11px]',
|
||
lg: 'px-3 py-1 rounded-full text-xs'
|
||
};
|
||
|
||
const variantClass = color ? '' : (variants[variant] || variants.default);
|
||
const colorStyle = color ? {
|
||
backgroundColor: `${color}1a`,
|
||
color: color,
|
||
borderColor: `${color}33`,
|
||
} : {};
|
||
|
||
return (
|
||
<span
|
||
className={`${baseClassName} ${variantClass} ${sizes[size]} ${className}`.trim()}
|
||
style={colorStyle}
|
||
{...props}
|
||
>
|
||
{dot && color && (
|
||
<span className="inline-block w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: color }} />
|
||
)}
|
||
{children}
|
||
{onRemove && (
|
||
<button
|
||
type="button"
|
||
onClick={(e) => { e.stopPropagation(); onRemove(); }}
|
||
className="ml-0.5 hover:opacity-70 transition-opacity leading-none"
|
||
aria-label="Retirer"
|
||
>
|
||
×
|
||
</button>
|
||
)}
|
||
</span>
|
||
);
|
||
};
|
||
|
||
// Predefined badge types for common use cases
|
||
export const StatusBadge = ({ status, ...props }) => {
|
||
const statusConfig = {
|
||
active: { variant: 'success', children: 'actif' },
|
||
inactive: { variant: 'default', children: 'inactif' },
|
||
pending: { variant: 'warning', children: 'en attente' },
|
||
draft: { variant: 'warning', children: 'brouillon' },
|
||
verified: { variant: 'success', children: 'vérifié' },
|
||
unverified: { variant: 'warning', children: 'non vérifié' },
|
||
admin: { variant: 'purple', children: 'admin' },
|
||
user: { variant: 'default', children: 'utilisateur' }
|
||
};
|
||
|
||
const config = statusConfig[status] || { variant: 'default', children: status };
|
||
|
||
return <Badge {...config} {...props} />;
|
||
};
|
||
|
||
export const TypeBadge = ({ type, ...props }) => {
|
||
const typeConfig = {
|
||
service: { variant: 'primary', children: 'service' },
|
||
physical: { variant: 'orange', children: 'produit physique' },
|
||
digital: { variant: 'purple', children: 'produit numérique' },
|
||
hosting: { variant: 'info', children: 'hébergement' },
|
||
domain: { variant: 'pink', children: 'domaine' }
|
||
};
|
||
|
||
const config = typeConfig[type] || { variant: 'default', children: type };
|
||
|
||
return <Badge {...config} {...props} />;
|
||
};
|
||
|
||
export default Badge;
|