89 lines
3.3 KiB
TypeScript
89 lines
3.3 KiB
TypeScript
import React from 'react'
|
|
import type { Flashcard } from '@/lib/services/flashcards'
|
|
import { getPartOfSpeechDisplay } from '@/lib/utils/flashcardUtils'
|
|
|
|
interface FlashcardInfoBlockProps {
|
|
flashcard: Flashcard
|
|
isEditing: boolean
|
|
editedCard?: Partial<Flashcard>
|
|
onEditChange: (field: string, value: string) => void
|
|
className?: string
|
|
}
|
|
|
|
export const FlashcardInfoBlock: React.FC<FlashcardInfoBlockProps> = ({
|
|
flashcard,
|
|
isEditing,
|
|
editedCard,
|
|
onEditChange,
|
|
className = ''
|
|
}) => {
|
|
return (
|
|
<div className={`bg-gray-50 rounded-lg p-4 border border-gray-200 ${className}`}>
|
|
<h3 className="font-semibold text-gray-900 mb-3 text-left">詞卡資訊</h3>
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<span className="text-gray-600">詞性:</span>
|
|
{isEditing ? (
|
|
<select
|
|
value={editedCard?.partOfSpeech || flashcard.partOfSpeech}
|
|
onChange={(e) => onEditChange('partOfSpeech', e.target.value)}
|
|
className="ml-2 p-1 border border-gray-300 rounded text-sm focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="noun">名詞</option>
|
|
<option value="verb">動詞</option>
|
|
<option value="adjective">形容詞</option>
|
|
<option value="adverb">副詞</option>
|
|
<option value="preposition">介詞</option>
|
|
<option value="conjunction">連詞</option>
|
|
<option value="interjection">感嘆詞</option>
|
|
<option value="pronoun">代詞</option>
|
|
<option value="other">其他</option>
|
|
</select>
|
|
) : (
|
|
<span className="ml-2 font-medium">{getPartOfSpeechDisplay(flashcard.partOfSpeech)}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<span className="text-gray-600">CEFR等級:</span>
|
|
{isEditing ? (
|
|
<select
|
|
value={editedCard?.cefr || flashcard.cefr}
|
|
onChange={(e) => onEditChange('cefr', e.target.value)}
|
|
className="ml-2 p-1 border border-gray-300 rounded text-sm focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="A1">A1</option>
|
|
<option value="A2">A2</option>
|
|
<option value="B1">B1</option>
|
|
<option value="B2">B2</option>
|
|
<option value="C1">C1</option>
|
|
<option value="C2">C2</option>
|
|
</select>
|
|
) : (
|
|
<span className="ml-2 font-medium">{flashcard.cefr}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<span className="text-gray-600">創建時間:</span>
|
|
<span className="ml-2 font-medium">{new Date(flashcard.createdAt).toLocaleDateString()}</span>
|
|
</div>
|
|
|
|
<div>
|
|
<span className="text-gray-600">下次複習:</span>
|
|
<span className="ml-2 font-medium">{new Date(flashcard.nextReviewDate).toLocaleDateString()}</span>
|
|
</div>
|
|
|
|
<div>
|
|
<span className="text-gray-600">複習次數:</span>
|
|
<span className="ml-2 font-medium">{flashcard.timesReviewed} 次</span>
|
|
</div>
|
|
|
|
<div>
|
|
<span className="text-gray-600">熟練度:</span>
|
|
<span className="ml-2 font-medium">{flashcard.masteryLevel}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |