53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { ReviewCardData } from '@/types/review'
|
|
import { SynonymsDisplay } from './SynonymsDisplay'
|
|
import { DifficultyBadge } from './DifficultyBadge'
|
|
|
|
interface CardHeaderProps {
|
|
cardData: ReviewCardData
|
|
showTranslation?: boolean
|
|
className?: string
|
|
}
|
|
|
|
export const CardHeader: React.FC<CardHeaderProps> = ({
|
|
cardData,
|
|
showTranslation = true,
|
|
className = ''
|
|
}) => {
|
|
return (
|
|
<div className={`text-center space-y-4 ${className}`}>
|
|
{/* 單字標題 */}
|
|
<div className="space-y-2">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900">
|
|
{cardData.word}
|
|
</h2>
|
|
|
|
{/* 發音 */}
|
|
{cardData.pronunciation && (
|
|
<p className="text-lg text-gray-600 font-mono">
|
|
{cardData.pronunciation}
|
|
</p>
|
|
)}
|
|
|
|
{/* 翻譯 */}
|
|
{showTranslation && (
|
|
<p className="text-xl text-blue-600 font-medium">
|
|
{cardData.translation}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 難度等級和同義詞 */}
|
|
<div className="flex items-center justify-center gap-4 flex-wrap">
|
|
<DifficultyBadge level={cardData.difficultyLevel} />
|
|
<SynonymsDisplay synonyms={cardData.synonyms} />
|
|
</div>
|
|
|
|
{/* 定義 */}
|
|
<div className="max-w-2xl mx-auto">
|
|
<p className="text-gray-700 leading-relaxed">
|
|
{cardData.definition}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |