62 lines
1.3 KiB
TypeScript
62 lines
1.3 KiB
TypeScript
import React from 'react'
|
|
|
|
interface TTSButtonProps {
|
|
text: string
|
|
lang?: string
|
|
isPlaying: boolean
|
|
onToggle: (text: string, lang?: string) => void
|
|
className?: string
|
|
size?: 'sm' | 'md' | 'lg'
|
|
}
|
|
|
|
export const TTSButton: React.FC<TTSButtonProps> = ({
|
|
text,
|
|
lang = 'en-US',
|
|
isPlaying,
|
|
onToggle,
|
|
className = '',
|
|
size = 'md'
|
|
}) => {
|
|
const sizeClasses = {
|
|
sm: 'w-6 h-6 text-xs',
|
|
md: 'w-8 h-8 text-sm',
|
|
lg: 'w-10 h-10 text-base'
|
|
}
|
|
|
|
const baseClasses = `
|
|
${sizeClasses[size]}
|
|
rounded-full
|
|
border-2
|
|
transition-all
|
|
duration-200
|
|
flex
|
|
items-center
|
|
justify-center
|
|
cursor-pointer
|
|
hover:scale-110
|
|
active:scale-95
|
|
`
|
|
|
|
const stateClasses = isPlaying
|
|
? 'bg-blue-500 border-blue-500 text-white animate-pulse'
|
|
: 'bg-gray-100 border-gray-300 text-gray-600 hover:bg-blue-50 hover:border-blue-400 hover:text-blue-600'
|
|
|
|
const handleClick = () => {
|
|
onToggle(text, lang)
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={handleClick}
|
|
className={`${baseClasses} ${stateClasses} ${className}`}
|
|
title={isPlaying ? '停止播放' : '播放發音'}
|
|
disabled={!text}
|
|
>
|
|
{isPlaying ? (
|
|
<span>⏸</span>
|
|
) : (
|
|
<span>🔊</span>
|
|
)}
|
|
</button>
|
|
)
|
|
} |