Spaces:
Running
Running
File size: 1,676 Bytes
7a0c9ff a8d792f 7a0c9ff a8d792f 7a0c9ff a8d792f 7a0c9ff a8d792f 7a0c9ff a8d792f 7a0c9ff a8d792f 7a0c9ff a8d792f 7a0c9ff a8d792f 7a0c9ff |
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
import { cn } from "@/lib/utils";
interface VirtualKeyProps {
label: string;
subLabel?: string;
isPressed?: boolean;
onMouseDown?: () => void;
onMouseUp?: () => void;
disabled?: boolean;
}
const VirtualKey = ({
label,
subLabel,
isPressed,
onMouseDown,
onMouseUp,
disabled,
}: VirtualKeyProps) => {
const handleMouseDown = (e: React.MouseEvent) => {
e.preventDefault();
if (!disabled && onMouseDown) {
onMouseDown();
}
};
const handleMouseUp = (e: React.MouseEvent) => {
e.preventDefault();
if (!disabled && onMouseUp) {
onMouseUp();
}
};
const handleMouseLeave = (e: React.MouseEvent) => {
e.preventDefault();
if (!disabled && onMouseUp) {
onMouseUp();
}
};
return (
<div className="flex flex-col items-center">
<div
className={cn(
"w-12 h-12 border rounded-md flex items-center justify-center font-bold transition-all duration-100",
"select-none user-select-none",
disabled && "opacity-50 cursor-not-allowed",
!disabled &&
(onMouseDown || onMouseUp) &&
"cursor-pointer hover:bg-white/5",
isPressed
? "bg-primary text-primary-foreground scale-110 border-primary"
: "bg-black/30 text-muted-foreground border-white/10"
)}
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
onMouseLeave={handleMouseLeave}
>
{label}
</div>
{subLabel && (
<span className="text-xs text-muted-foreground mt-1 font-mono">
{subLabel}
</span>
)}
</div>
);
};
export default VirtualKey;
|