57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
/**
|
|
* InteractionModeToggle Component
|
|
*
|
|
* Toggle between Edit mode and Interact mode in constructor.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import type { ConstructorInteractionMode } from './types';
|
|
|
|
interface InteractionModeToggleProps {
|
|
mode: ConstructorInteractionMode;
|
|
onModeChange: (mode: ConstructorInteractionMode) => void;
|
|
}
|
|
|
|
const InteractionModeToggle: React.FC<InteractionModeToggleProps> = ({
|
|
mode,
|
|
onModeChange,
|
|
}) => {
|
|
const isEditMode = mode === 'edit';
|
|
|
|
return (
|
|
<div className='flex flex-wrap items-center gap-2'>
|
|
<div className='inline-flex overflow-hidden rounded border border-gray-300 bg-white text-xs font-semibold'>
|
|
<button
|
|
type='button'
|
|
className={`px-3 py-1.5 ${
|
|
isEditMode
|
|
? 'bg-blue-600 text-white'
|
|
: 'text-gray-700 hover:bg-gray-50'
|
|
}`}
|
|
onClick={() => onModeChange('edit')}
|
|
>
|
|
Edit mode
|
|
</button>
|
|
<button
|
|
type='button'
|
|
className={`border-l border-gray-300 px-3 py-1.5 ${
|
|
!isEditMode
|
|
? 'bg-blue-600 text-white'
|
|
: 'text-gray-700 hover:bg-gray-50'
|
|
}`}
|
|
onClick={() => onModeChange('interact')}
|
|
>
|
|
Interact mode
|
|
</button>
|
|
</div>
|
|
<span className='text-[11px] text-gray-600'>
|
|
{isEditMode
|
|
? 'Drag & configure elements.'
|
|
: 'Click and interact with rendered elements.'}
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InteractionModeToggle;
|