42 lines
1.6 KiB
TypeScript
Executable File
42 lines
1.6 KiB
TypeScript
Executable File
import React from 'react';
|
|
import { Pizza, PlayCircle, Moon, Paintbrush } from 'lucide-react';
|
|
import GatherResourcesButton from './GatherResourcesButton';
|
|
import { Pet } from '../types/Pet';
|
|
|
|
interface InteractionMenuProps {
|
|
pet: Pet;
|
|
onFeed: () => void;
|
|
onPlay: () => void;
|
|
onSleep: () => void;
|
|
onCustomize: () => void;
|
|
}
|
|
|
|
export default function InteractionMenu({ pet, onFeed, onPlay, onSleep, onCustomize }: InteractionMenuProps) {
|
|
const ActionButton = ({ icon: Icon, label, onClick, color }: { icon: any; label: string; onClick: () => void; color: string }) => (
|
|
<button
|
|
onClick={onClick}
|
|
className={`flex items-center justify-center space-x-2 bg-${color}-900/30
|
|
hover:bg-${color}-800/50 border-2 border-${color}-500/50 rounded-lg p-4
|
|
transition-all duration-300 transform hover:scale-105 w-full`}
|
|
>
|
|
<Icon className="w-6 h-6" />
|
|
<span>{label}</span>
|
|
</button>
|
|
);
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
<ActionButton icon={Pizza} label="Feed" onClick={onFeed} color="green" />
|
|
<ActionButton icon={PlayCircle} label="Play" onClick={onPlay} color="blue" />
|
|
<ActionButton icon={Moon} label="Sleep" onClick={onSleep} color="purple" />
|
|
<ActionButton icon={Paintbrush} label="Customize" onClick={onCustomize} color="pink" />
|
|
<div className="col-span-2 md:col-span-3">
|
|
<GatherResourcesButton
|
|
pet={pet}
|
|
onGatherStart={() => console.log('Gathering started')}
|
|
onGatherComplete={() => console.log('Gathering completed')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |