49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { GalleryHorizontalEnd, RefreshCw } from 'lucide-react';
|
|
|
|
interface StackTheDeckProps {
|
|
onRedo: () => void;
|
|
onPick: () => void;
|
|
onHover: (state: React.ReactNode) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export default function StackTheDeck({
|
|
onRedo,
|
|
onPick,
|
|
onHover,
|
|
className = '',
|
|
}: StackTheDeckProps) {
|
|
const curryHandleClick = (action: () => void) => (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
e.stopPropagation();
|
|
action();
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`absolute top-0 right-0 flex flex-col items-center justify-center bg-black/50 rounded-tr-lg rounded-bl-lg ${className}`}
|
|
>
|
|
<button
|
|
onMouseEnter={() => onHover(<p className="text-yellow-400">Redraw</p>)}
|
|
onMouseLeave={() => onHover(null)}
|
|
onTouchStart={() => onHover(<p className="text-yellow-400">Redraw</p>)}
|
|
onTouchEnd={() => onHover(null)}
|
|
className={`p-1 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
|
|
onClick={curryHandleClick(onRedo)}
|
|
>
|
|
<RefreshCw className="w-3 h-3" />
|
|
</button>
|
|
|
|
<button
|
|
onMouseEnter={() => onHover(<p className="text-yellow-400">Select</p>)}
|
|
onMouseLeave={() => onHover(null)}
|
|
onTouchStart={() => onHover(<p className="text-yellow-400">Select</p>)}
|
|
onTouchEnd={() => onHover(null)}
|
|
className={`p-1 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
|
|
onClick={curryHandleClick(onPick)}
|
|
>
|
|
<GalleryHorizontalEnd className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|