import closeIconPath from '@sd/assets/svgs/macos_close.svg';
import fullscreenIconPath from '@sd/assets/svgs/macos_fullscreen.svg';
import minimizeIconPath from '@sd/assets/svgs/macos_minimize.svg';
import clsx from 'clsx';
import { ComponentProps, HTMLAttributes, useEffect, useRef } from 'react';
import { useFocusState } from '~/hooks/useFocusState';
export interface TrafficLightsProps extends ComponentProps<'div'> {
onClose?: () => void;
onMinimize?: () => void;
onFullscreen?: () => void;
}
export function MacTrafficLights(props: TrafficLightsProps) {
const { onClose, onMinimize, onFullscreen, className } = props;
const [focused] = useFocusState();
return (
);
}
interface TrafficLightProps {
type: 'close' | 'minimize' | 'fullscreen';
colorful: boolean;
onClick?: HTMLAttributes['onClick'];
}
function TrafficLight(props: TrafficLightProps) {
const { onClick = () => undefined, colorful = false, type } = props;
const iconPath = useRef(closeIconPath);
useEffect(() => {
switch (type) {
case 'close':
iconPath.current = closeIconPath;
break;
case 'minimize':
iconPath.current = minimizeIconPath;
break;
case 'fullscreen':
iconPath.current = fullscreenIconPath;
break;
}
}, [type]);
return (
);
}