import { HTMLProps, useContext, useEffect, useState } from 'react';
import { twMerge } from 'tailwind-merge';
import { AppWindowContext, WindowButton, WindowIcons } from '@shared/titlebar';
export function MacOS({ className, ...props }: HTMLProps) {
const { minimizeWindow, maximizeWindow, fullscreenWindow, closeWindow } =
useContext(AppWindowContext);
const [isAltKeyPressed, setIsAltKeyPressed] = useState(false);
const [isHovering, setIsHovering] = useState(false);
const last = isAltKeyPressed ? : ;
const key = 'Alt';
const handleMouseEnter = () => {
setIsHovering(true);
};
const handleMouseLeave = () => {
setIsHovering(false);
};
const handleAltKeyDown = (e: KeyboardEvent) => {
if (e.key === key) {
setIsAltKeyPressed(true);
}
};
const handleAltKeyUp = (e: KeyboardEvent) => {
if (e.key === key) {
setIsAltKeyPressed(false);
}
};
useEffect(() => {
// Attach event listeners when the component mounts
window.addEventListener('keydown', handleAltKeyDown);
window.addEventListener('keyup', handleAltKeyUp);
}, []);
return (
{isHovering && }
{isHovering && }
{isHovering && last}
);
}