29 lines
694 B
TypeScript
29 lines
694 B
TypeScript
import AudioPlayer from '@/components/AudioPlayer'
|
|
|
|
interface AudioSectionProps {
|
|
word: string
|
|
pronunciation?: string
|
|
className?: string
|
|
showPronunciation?: boolean
|
|
}
|
|
|
|
export const AudioSection: React.FC<AudioSectionProps> = ({
|
|
word,
|
|
pronunciation,
|
|
className = '',
|
|
showPronunciation = true
|
|
}) => {
|
|
return (
|
|
<div className={`flex items-center justify-center gap-4 ${className}`}>
|
|
{/* 音頻播放器 */}
|
|
<AudioPlayer text={word} />
|
|
|
|
{/* 發音符號 */}
|
|
{showPronunciation && pronunciation && (
|
|
<span className="text-gray-600 font-mono text-sm">
|
|
{pronunciation}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)
|
|
} |