54 lines
2.1 KiB
TypeScript
54 lines
2.1 KiB
TypeScript
import React from 'react'
|
|
import type { Flashcard } from '@/lib/services/flashcards'
|
|
import { getPartOfSpeechDisplay, getCEFRColor } from '@/lib/utils/flashcardUtils'
|
|
import { BluePlayButton } from '@/components/shared/BluePlayButton'
|
|
|
|
interface FlashcardDetailHeaderProps {
|
|
flashcard: Flashcard
|
|
}
|
|
|
|
export const FlashcardDetailHeader: React.FC<FlashcardDetailHeaderProps> = ({
|
|
flashcard
|
|
}) => {
|
|
return (
|
|
<div className="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 border-b border-blue-200">
|
|
<div className="pr-16">
|
|
<h1 className="text-4xl font-bold text-gray-900 mb-3">{flashcard.word}</h1>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-sm bg-gray-100 text-gray-700 px-3 py-1 rounded-full">
|
|
{getPartOfSpeechDisplay(flashcard.partOfSpeech)}
|
|
</span>
|
|
<span className="text-lg text-gray-600">{flashcard.pronunciation}</span>
|
|
|
|
{/* TTS播放按鈕 - 使用統一的藍底漸層組件 */}
|
|
<BluePlayButton
|
|
text={flashcard.word}
|
|
lang="en-US"
|
|
size="md"
|
|
title="點擊聽詞彙發音"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 學習統計 */}
|
|
<div className="grid grid-cols-2 gap-4 text-center mt-4">
|
|
<div className="bg-white bg-opacity-60 rounded-lg p-3">
|
|
<div className="text-2xl font-bold text-gray-900">{flashcard.timesReviewed || 0}</div>
|
|
<div className="text-sm text-gray-600">複習次數</div>
|
|
</div>
|
|
<div className="bg-white bg-opacity-60 rounded-lg p-3">
|
|
<div className="text-2xl font-bold text-gray-900">
|
|
{(() => {
|
|
if (!flashcard.nextReviewDate) return 0
|
|
const reviewDate = new Date(flashcard.nextReviewDate)
|
|
if (isNaN(reviewDate.getTime())) return 0
|
|
const days = Math.ceil((reviewDate.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24))
|
|
return Math.max(0, days)
|
|
})()}
|
|
</div>
|
|
<div className="text-sm text-gray-600">天後複習</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |