58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
/**
|
|
* ElementEditorHeader Component
|
|
*
|
|
* Draggable header for the element editor panel.
|
|
* Includes title, collapse toggle, and remove button.
|
|
*/
|
|
|
|
import React from 'react';
|
|
|
|
interface ElementEditorHeaderProps {
|
|
title: string;
|
|
isCollapsed: boolean;
|
|
showRemoveButton: boolean;
|
|
onToggleCollapse: () => void;
|
|
onRemove: () => void;
|
|
onDragStart: (event: React.MouseEvent) => void;
|
|
}
|
|
|
|
const ElementEditorHeader: React.FC<ElementEditorHeaderProps> = ({
|
|
title,
|
|
isCollapsed,
|
|
showRemoveButton,
|
|
onToggleCollapse,
|
|
onRemove,
|
|
onDragStart,
|
|
}) => {
|
|
return (
|
|
<div
|
|
className='mb-3 flex items-center justify-between gap-2 cursor-move'
|
|
onMouseDown={onDragStart}
|
|
>
|
|
<p className='text-xs font-bold uppercase tracking-wide text-gray-700'>
|
|
{title}
|
|
</p>
|
|
<div className='flex items-center gap-2'>
|
|
<button
|
|
type='button'
|
|
className='text-xs text-gray-700 hover:underline'
|
|
onClick={onToggleCollapse}
|
|
>
|
|
{isCollapsed ? 'Expand' : 'Collapse'}
|
|
</button>
|
|
{showRemoveButton && (
|
|
<button
|
|
type='button'
|
|
className='text-xs text-red-600 hover:underline'
|
|
onClick={onRemove}
|
|
>
|
|
Remove element
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ElementEditorHeader;
|