79f8035d18
- Added `clsx` and `tailwind-merge` to `package.json` and `package-lock.json` for improved class management and utility merging. - Updated `Column` and `TaskCard` components to utilize new UI components (`Card`, `Badge`) for a more cohesive design. - Refactored styles in `Header` and Kanban components to align with the new design system. - Marked several tasks as completed in `TODO.md` reflecting progress on UI enhancements.
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { HTMLAttributes, forwardRef } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'outline';
|
|
size?: 'sm' | 'md';
|
|
}
|
|
|
|
const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
|
|
({ className, variant = 'default', size = 'md', ...props }, ref) => {
|
|
const baseStyles = 'inline-flex items-center font-mono font-medium transition-all duration-200';
|
|
|
|
const variants = {
|
|
default: 'bg-slate-800/50 text-slate-300 border border-slate-600/50',
|
|
primary: 'bg-cyan-950/50 text-cyan-300 border border-cyan-500/30',
|
|
success: 'bg-emerald-950/50 text-emerald-300 border border-emerald-500/30',
|
|
warning: 'bg-yellow-950/50 text-yellow-300 border border-yellow-500/30',
|
|
danger: 'bg-red-950/50 text-red-300 border border-red-500/30',
|
|
outline: 'bg-transparent text-slate-400 border border-slate-600 hover:bg-slate-800/30 hover:text-slate-300'
|
|
};
|
|
|
|
const sizes = {
|
|
sm: 'px-1.5 py-0.5 text-xs rounded',
|
|
md: 'px-2 py-1 text-xs rounded-md'
|
|
};
|
|
|
|
return (
|
|
<span
|
|
className={cn(
|
|
baseStyles,
|
|
variants[variant],
|
|
sizes[size],
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
|
|
Badge.displayName = 'Badge';
|
|
|
|
export { Badge };
|