72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
import type { PointerEvent, ReactNode } from 'react';
|
|
|
|
import { TabButton } from '../ui/TabButton';
|
|
import { CloseIcon } from '../ui/icons/CloseIcon';
|
|
|
|
interface ResizeHandlers {
|
|
onPointerDown: (event: PointerEvent) => void;
|
|
onPointerMove: (event: PointerEvent) => void;
|
|
onPointerUp: () => void;
|
|
}
|
|
|
|
interface MapPageSelectionPaneProps {
|
|
width: number;
|
|
resizeHandlers: ResizeHandlers;
|
|
tab: 'properties' | 'area';
|
|
onAreaTabClick: () => void;
|
|
onPropertiesTabClick: () => void;
|
|
onClose: () => void;
|
|
renderAreaPane: () => ReactNode;
|
|
renderPropertiesPane: () => ReactNode;
|
|
}
|
|
|
|
export function MapPageSelectionPane({
|
|
width,
|
|
resizeHandlers,
|
|
tab,
|
|
onAreaTabClick,
|
|
onPropertiesTabClick,
|
|
onClose,
|
|
renderAreaPane,
|
|
renderPropertiesPane,
|
|
}: MapPageSelectionPaneProps) {
|
|
return (
|
|
<div
|
|
data-tutorial="right-pane"
|
|
className="flex bg-white dark:bg-navy-950 shadow-lg z-10"
|
|
style={{ width }}
|
|
>
|
|
<div
|
|
className="w-3 cursor-col-resize flex items-center justify-center group bg-warm-100 dark:bg-navy-800 hover:bg-warm-200 dark:hover:bg-navy-700 border-x border-warm-200 dark:border-navy-700"
|
|
{...resizeHandlers}
|
|
>
|
|
<div className="flex flex-col gap-1.5">
|
|
<div className="w-1 h-1 rounded-full bg-warm-300 dark:bg-navy-600 group-hover:bg-warm-400 dark:group-hover:bg-navy-500" />
|
|
<div className="w-1 h-1 rounded-full bg-warm-300 dark:bg-navy-600 group-hover:bg-warm-400 dark:group-hover:bg-navy-500" />
|
|
<div className="w-1 h-1 rounded-full bg-warm-300 dark:bg-navy-600 group-hover:bg-warm-400 dark:group-hover:bg-navy-500" />
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 flex flex-col overflow-hidden">
|
|
<div className="flex border-b border-warm-200 dark:border-navy-700 text-sm">
|
|
<TabButton label="Area" isActive={tab === 'area'} onClick={onAreaTabClick} />
|
|
<TabButton
|
|
label="Properties"
|
|
isActive={tab === 'properties'}
|
|
onClick={onPropertiesTabClick}
|
|
/>
|
|
<button
|
|
onClick={onClose}
|
|
className="px-2 flex items-center text-warm-400 hover:text-warm-700 dark:hover:text-warm-300"
|
|
title="Close pane"
|
|
>
|
|
<CloseIcon className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-hidden">
|
|
{tab === 'properties' ? renderPropertiesPane() : renderAreaPane()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|