dramaling-vocab-learning/frontend/components/review/shared/SynonymsDisplay.tsx

33 lines
823 B
TypeScript

interface SynonymsDisplayProps {
synonyms: string[]
className?: string
showLabel?: boolean
}
export const SynonymsDisplay: React.FC<SynonymsDisplayProps> = ({
synonyms,
className = '',
showLabel = true
}) => {
if (!synonyms || synonyms.length === 0) {
return null
}
return (
<div className={`inline-flex items-center gap-2 ${className}`}>
{showLabel && (
<span className="text-sm font-medium text-gray-500">:</span>
)}
<div className="flex flex-wrap gap-1">
{synonyms.map((synonym, index) => (
<span
key={index}
className="px-2 py-1 bg-blue-100 text-blue-700 text-sm rounded-full font-medium"
>
{synonym}
</span>
))}
</div>
</div>
)
}