Files
llink/js/desktop/src/components/window-controls.tsx
T

62 lines
1.4 KiB
TypeScript

import { useEffect, useState } from 'react';
import { Copy, Minus, Square, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { platform } from '@/lib/platform';
export function WindowControls() {
const [isMaximized, setIsMaximized] = useState(false);
useEffect(() => {
return platform.window.onMaximizeChange(setIsMaximized);
}, []);
if (platform.kind !== 'electron') return null;
const minimize = (
<Button
key="minimize"
variant="ghost"
size="icon-sm"
onClick={() => platform.window.minimize()}
aria-label="Minimize"
className="text-muted-foreground rounded"
>
<Minus />
</Button>
);
const maximize = (
<Button
key="maximize"
variant="ghost"
size="icon-sm"
onClick={() => platform.window.maximize()}
aria-label={isMaximized ? 'Restore' : 'Maximize'}
className="text-muted-foreground rounded"
>
{isMaximized ? <Copy /> : <Square />}
</Button>
);
const close = (
<Button
key="close"
variant="ghost"
size="icon-sm"
onClick={() => platform.window.close()}
aria-label="Close"
className="hover:text-destructive text-muted-foreground rounded"
>
<X />
</Button>
);
const buttons = [close, maximize, minimize];
return (
<div className={cn('no-drag flex items-center gap-0.5')}>{buttons}</div>
);
}