59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
|
import type { DifficultyRating } from '../types/vocabulary';
|
||
|
|
|
||
|
|
interface RatingButtonsProps {
|
||
|
|
onRate: (rating: DifficultyRating) => void;
|
||
|
|
disabled?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function RatingButtons({ onRate, disabled }: RatingButtonsProps) {
|
||
|
|
const buttons = [
|
||
|
|
{
|
||
|
|
rating: 'again' as DifficultyRating,
|
||
|
|
label: '重来',
|
||
|
|
sublabel: '< 1 min',
|
||
|
|
color: 'from-rose-400 to-red-500',
|
||
|
|
shadow: 'shadow-rose-200'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
rating: 'hard' as DifficultyRating,
|
||
|
|
label: '困难',
|
||
|
|
sublabel: '~ 2 days',
|
||
|
|
color: 'from-orange-400 to-amber-500',
|
||
|
|
shadow: 'shadow-orange-200'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
rating: 'good' as DifficultyRating,
|
||
|
|
label: '良好',
|
||
|
|
sublabel: '~ 4 days',
|
||
|
|
color: 'from-blue-400 to-indigo-500',
|
||
|
|
shadow: 'shadow-blue-200'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
rating: 'easy' as DifficultyRating,
|
||
|
|
label: '简单',
|
||
|
|
sublabel: '~ 7 days',
|
||
|
|
color: 'from-emerald-400 to-teal-500',
|
||
|
|
shadow: 'shadow-emerald-200'
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="grid grid-cols-4 gap-3 mt-8">
|
||
|
|
{buttons.map(({ rating, label, sublabel, color, shadow }) => (
|
||
|
|
<button
|
||
|
|
key={rating}
|
||
|
|
onClick={() => onRate(rating)}
|
||
|
|
disabled={disabled}
|
||
|
|
className={`group relative overflow-hidden bg-gradient-to-b ${color} ${shadow} shadow-lg hover:shadow-xl text-white rounded-2xl py-4 px-2 transition-all duration-200 hover:-translate-y-1 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0`}
|
||
|
|
>
|
||
|
|
<div className="relative z-10 flex flex-col items-center">
|
||
|
|
<span className="text-lg font-bold">{label}</span>
|
||
|
|
<span className="text-xs opacity-80 mt-1">{sublabel}</span>
|
||
|
|
</div>
|
||
|
|
<div className="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|