78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
/**
|
|
* ConstructorControlsPanel Component
|
|
*
|
|
* Draggable panel with page selector, mode toggle, and exit button.
|
|
* Used in constructor for top-level navigation controls.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import BaseButton from '../BaseButton';
|
|
import { mdiExitToApp } from '@mdi/js';
|
|
import PageSelector from './PageSelector';
|
|
import InteractionModeToggle from './InteractionModeToggle';
|
|
import type { Position, TourPage, ConstructorInteractionMode } from './types';
|
|
|
|
interface ConstructorControlsPanelProps {
|
|
projectId: string;
|
|
pages: TourPage[];
|
|
activePageId: string;
|
|
interactionMode: ConstructorInteractionMode;
|
|
position: Position;
|
|
onPageChange: (pageId: string) => void;
|
|
onModeChange: (mode: ConstructorInteractionMode) => void;
|
|
onDragStart: (event: React.MouseEvent) => void;
|
|
}
|
|
|
|
const ConstructorControlsPanel: React.FC<ConstructorControlsPanelProps> = ({
|
|
projectId,
|
|
pages,
|
|
activePageId,
|
|
interactionMode,
|
|
position,
|
|
onPageChange,
|
|
onModeChange,
|
|
onDragStart,
|
|
}) => {
|
|
return (
|
|
<div
|
|
className='fixed z-[1000] w-[min(92vw,460px)] rounded-lg border border-gray-200 bg-white shadow-xl'
|
|
style={{
|
|
left: position.x,
|
|
top: position.y,
|
|
}}
|
|
>
|
|
<div
|
|
className='flex cursor-move items-center justify-between rounded-t-lg border-b border-gray-200 bg-gray-50 px-3 py-2'
|
|
onMouseDown={onDragStart}
|
|
>
|
|
<span className='text-xs font-bold uppercase'>
|
|
Constructor Controls
|
|
</span>
|
|
</div>
|
|
<div className='space-y-2 p-3'>
|
|
<div className='flex flex-wrap items-center gap-2'>
|
|
<PageSelector
|
|
pages={pages}
|
|
activePageId={activePageId}
|
|
onPageChange={onPageChange}
|
|
/>
|
|
<BaseButton
|
|
color='lightDark'
|
|
label='Exit to Assets'
|
|
icon={mdiExitToApp}
|
|
href={
|
|
projectId ? `/projects/${projectId}` : '/projects/projects-list'
|
|
}
|
|
/>
|
|
</div>
|
|
<InteractionModeToggle
|
|
mode={interactionMode}
|
|
onModeChange={onModeChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ConstructorControlsPanel;
|