NeahNew/components/electron/WindowControls.tsx
2025-05-06 22:43:27 +02:00

69 lines
2.1 KiB
TypeScript

"use client";
import { useEffect, useState } from 'react';
import { Button } from "@/components/ui/button";
import { X, Minus, Square } from 'lucide-react';
// We're now using the global type declaration from types/electron.d.ts
export function WindowControls() {
const [isElectron, setIsElectron] = useState(false);
const [isMaximized, setIsMaximized] = useState(false);
useEffect(() => {
// Check if we're running in Electron
if (window.electron) {
setIsElectron(true);
// Set up listeners for window state
const handleMaximize = () => setIsMaximized(true);
const handleUnmaximize = () => setIsMaximized(false);
window.electron.windowState?.onMaximized(handleMaximize);
window.electron.windowState?.onUnmaximized(handleUnmaximize);
// Clean up listeners on unmount
return () => {
if (window.electron && window.electron.windowState) {
window.electron.windowState.removeMaximizedListener();
window.electron.windowState.removeUnmaximizedListener();
}
};
}
}, []);
// If not in Electron, don't render anything
if (!isElectron) return null;
return (
<div className="flex items-center">
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0 text-white/70 hover:text-white hover:bg-transparent"
onClick={() => window.electron?.windowControl.minimize()}
aria-label="Minimize"
>
<Minus className="h-3 w-3" />
</Button>
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0 text-white/70 hover:text-white hover:bg-transparent"
onClick={() => window.electron?.windowControl.maximize()}
aria-label="Maximize"
>
<Square className="h-3 w-3" />
</Button>
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0 text-white/70 hover:text-white hover:bg-red-500"
onClick={() => window.electron?.windowControl.close()}
aria-label="Close"
>
<X className="h-3 w-3" />
</Button>
</div>
);
}