80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface ChipProps {
|
|
label: string;
|
|
onDismiss?: () => void;
|
|
icon?: LucideIcon;
|
|
variant?: 'default' | 'outlined' | 'solid';
|
|
color?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning';
|
|
}
|
|
|
|
const colorMap = {
|
|
primary: {
|
|
default: 'bg-blue-100 text-blue-700 border-blue-200',
|
|
outlined: 'bg-transparent text-blue-600 border-blue-600',
|
|
solid: 'bg-blue-600 text-white border-blue-600',
|
|
},
|
|
secondary: {
|
|
default: 'bg-slate-100 text-slate-700 border-slate-200',
|
|
outlined: 'bg-transparent text-slate-600 border-slate-600',
|
|
solid: 'bg-slate-600 text-white border-slate-600',
|
|
},
|
|
danger: {
|
|
default: 'bg-red-100 text-red-700 border-red-200',
|
|
outlined: 'bg-transparent text-red-600 border-red-600',
|
|
solid: 'bg-red-600 text-white border-red-600',
|
|
},
|
|
success: {
|
|
default: 'bg-green-100 text-green-700 border-green-200',
|
|
outlined: 'bg-transparent text-green-600 border-green-600',
|
|
solid: 'bg-green-600 text-white border-green-600',
|
|
},
|
|
warning: {
|
|
default: 'bg-yellow-100 text-yellow-700 border-yellow-200',
|
|
outlined: 'bg-transparent text-yellow-600 border-yellow-600',
|
|
solid: 'bg-yellow-600 text-white border-yellow-600',
|
|
},
|
|
};
|
|
|
|
export default function Chip({
|
|
label,
|
|
onDismiss,
|
|
icon: Icon,
|
|
variant = 'default',
|
|
color = 'primary',
|
|
}: ChipProps) {
|
|
const colorClasses = colorMap[color][variant];
|
|
|
|
return (
|
|
<div
|
|
className={`
|
|
inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full border text-sm font-medium transition-colors
|
|
${colorClasses}
|
|
`}
|
|
>
|
|
{Icon && <Icon className="w-3.5 h-3.5" />}
|
|
<span>{label}</span>
|
|
{onDismiss && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onDismiss();
|
|
}}
|
|
className="ml-0.5 p-0.5 rounded-full hover:bg-black/10 transition-colors"
|
|
aria-label={`Remove ${label}`}
|
|
>
|
|
<svg
|
|
className="w-3 h-3"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={2.5}
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
} |