42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import React, { memo } from 'react'
|
||
|
||
interface HintPanelProps {
|
||
isVisible: boolean
|
||
definition: string
|
||
synonyms?: string[]
|
||
className?: string
|
||
}
|
||
|
||
export const HintPanel = memo<HintPanelProps>(({
|
||
isVisible,
|
||
definition,
|
||
synonyms = [],
|
||
className = ''
|
||
}) => {
|
||
if (!isVisible) return null
|
||
|
||
return (
|
||
<div className={`mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg ${className}`}>
|
||
<h4 className="font-semibold text-yellow-800 mb-2">詞彙定義：</h4>
|
||
<p className="text-yellow-800 mb-3">{definition}</p>
|
||
|
||
{synonyms && synonyms.length > 0 && (
|
||
<div>
|
||
<h4 className="font-semibold text-yellow-800 mb-2">同義詞提示：</h4>
|
||
<div className="flex flex-wrap gap-2">
|
||
{synonyms.map((synonym, index) => (
|
||
<span
|
||
key={index}
|
||
className="px-3 py-1 bg-yellow-100 text-yellow-700 text-sm rounded-full font-medium border border-yellow-300"
|
||
>
|
||
{synonym}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
})
|
||
|
||
HintPanel.displayName = 'HintPanel' |