46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import type { MouseEvent } from 'react';
|
|
|
|
import { CHROME_ICONS } from '../uiAssets';
|
|
import { PixelIcon } from './PixelIcon';
|
|
|
|
type PixelCloseButtonProps = {
|
|
onClick: () => void;
|
|
label?: string;
|
|
placement?: 'absolute' | 'inline';
|
|
className?: string;
|
|
};
|
|
|
|
/**
|
|
* RPG 像素风弹窗右上关闭按钮。
|
|
* 统一拦截点击冒泡，避免历史手写 overlay / panel 的点击处理影响关闭行为。
|
|
*/
|
|
export function PixelCloseButton({
|
|
onClick,
|
|
label = '关闭面板',
|
|
placement = 'absolute',
|
|
className = '',
|
|
}: PixelCloseButtonProps) {
|
|
const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
onClick();
|
|
};
|
|
|
|
const placementClassName =
|
|
placement === 'absolute'
|
|
? 'absolute right-4 top-3 sm:right-5 sm:top-4'
|
|
: 'relative shrink-0';
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
aria-label={label}
|
|
title={label}
|
|
onClick={handleClick}
|
|
className={`${placementClassName} z-20 flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-black/30 p-0 text-zinc-400 shadow-[0_8px_18px_rgba(0,0,0,0.28)] transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-200/70 ${className}`.trim()}
|
|
>
|
|
<PixelIcon src={CHROME_ICONS.close} className="h-4 w-4" />
|
|
</button>
|
|
);
|
|
}
|