File size: 1,499 Bytes
59bd45e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | import React from 'react';
import { Smile, Sparkles, CheckCircle2 } from 'lucide-react';
import { MoodAction } from '../types';
interface TopActionsProps {
onActionClick: (action: MoodAction) => void;
}
export const TopActions: React.FC<TopActionsProps> = ({ onActionClick }) => {
const actions = [
{ id: MoodAction.MOOD, label: '心情', icon: Smile, color: 'text-pink-400' },
{ id: MoodAction.INSPIRATION, label: '灵感', icon: Sparkles, color: 'text-purple-400' },
{ id: MoodAction.TODO, label: '待办', icon: CheckCircle2, color: 'text-blue-400' },
];
return (
<div className="flex justify-center items-center gap-10 w-full px-6 pt-16 pb-2 z-20">
{actions.map((action) => (
<button
key={action.id}
onClick={() => onActionClick(action.id)}
className="group flex flex-col items-center justify-center gap-2.5 p-3 rounded-2xl transition-all duration-500 hover:bg-white/40 active:scale-95"
>
<div className={`p-4 rounded-full bg-white/50 shadow-sm backdrop-blur-sm group-hover:shadow-md transition-all duration-500 ring-1 ring-white/50 ${action.color}`}>
<action.icon size={40} strokeWidth={1.5} className="opacity-80 group-hover:opacity-100 transition-opacity" />
</div>
<span className="text-sm font-medium text-slate-500 tracking-wide group-hover:text-slate-700 transition-colors">
{action.label}
</span>
</button>
))}
</div>
);
};
|