76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
import React from 'react'
|
|
|
|
interface BluePlayButtonProps {
|
|
text?: string
|
|
lang?: string
|
|
isPlaying: boolean
|
|
onToggle: (text: string, lang?: string) => void
|
|
disabled?: boolean
|
|
className?: string
|
|
size?: 'sm' | 'md' | 'lg'
|
|
title?: string
|
|
}
|
|
|
|
export const BluePlayButton: React.FC<BluePlayButtonProps> = ({
|
|
text,
|
|
lang = 'en-US',
|
|
isPlaying,
|
|
onToggle,
|
|
disabled = false,
|
|
className = '',
|
|
size = 'md',
|
|
title
|
|
}) => {
|
|
const sizeClasses = {
|
|
sm: 'w-8 h-8',
|
|
md: 'w-10 h-10',
|
|
lg: 'w-12 h-12'
|
|
}
|
|
|
|
const iconSizes = {
|
|
sm: 'w-4 h-4',
|
|
md: 'w-5 h-5',
|
|
lg: 'w-6 h-6'
|
|
}
|
|
|
|
const handleClick = () => {
|
|
onToggle(text || '', lang)
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={handleClick}
|
|
disabled={disabled}
|
|
title={title || (isPlaying ? "點擊停止播放" : "點擊播放發音")}
|
|
className={`group relative ${sizeClasses[size]} rounded-full shadow-lg transform transition-all duration-200
|
|
${isPlaying
|
|
? 'bg-gradient-to-br from-green-500 to-green-600 shadow-green-200 scale-105'
|
|
: 'bg-gradient-to-br from-blue-500 to-blue-600 hover:shadow-xl hover:scale-105 shadow-blue-200'
|
|
} ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} ${className}
|
|
`}
|
|
>
|
|
{/* 播放中波紋效果 */}
|
|
{isPlaying && (
|
|
<div className="absolute inset-0 bg-blue-400 rounded-full animate-ping opacity-40"></div>
|
|
)}
|
|
|
|
{/* 按鈕圖標 */}
|
|
<div className="relative z-10 flex items-center justify-center w-full h-full">
|
|
{isPlaying ? (
|
|
<svg className={`${iconSizes[size]} text-white`} fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
|
|
</svg>
|
|
) : (
|
|
<svg className={`${iconSizes[size]} text-white group-hover:scale-110 transition-transform`} fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z"/>
|
|
</svg>
|
|
)}
|
|
</div>
|
|
|
|
{/* 懸停提示光環 */}
|
|
{!isPlaying && !disabled && (
|
|
<div className="absolute inset-0 rounded-full bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-200"></div>
|
|
)}
|
|
</button>
|
|
)
|
|
} |