hykocx
ecb4929753
- remove color palette table from main color section in DESIGN.md - update typography scale (reduce body/secondary text sizes) - revise border radius values for badges, buttons, modals, and cards - expand sidebar navigation section with detailed structure and visual states - add accordion section behavior and item template specs - update Badge component to use fully rounded corners and adjust sizing - update Modal component border radius and backdrop styles
83 lines
3.4 KiB
JavaScript
83 lines
3.4 KiB
JavaScript
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
const Badge = ({
|
|
children,
|
|
variant = 'default',
|
|
size = 'sm',
|
|
color = null,
|
|
className = '',
|
|
...props
|
|
}) => {
|
|
const baseClassName = 'inline-flex items-center 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}
|
|
>
|
|
{children}
|
|
</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;
|