58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ToolbarProps {
|
|
onSave?: () => void;
|
|
onPreview?: () => void;
|
|
onExit?: () => void;
|
|
isLoading?: boolean;
|
|
hasUnsavedChanges?: boolean;
|
|
}
|
|
|
|
export const Toolbar: React.FC<ToolbarProps> = ({
|
|
onSave,
|
|
onPreview,
|
|
onExit,
|
|
isLoading = false,
|
|
hasUnsavedChanges = false,
|
|
}) => {
|
|
return (
|
|
<div data-testid="toolbar" className="toolbar">
|
|
<button
|
|
data-testid="save-btn"
|
|
onClick={onSave}
|
|
disabled={isLoading}
|
|
aria-label="Save page"
|
|
className={hasUnsavedChanges ? 'has-changes' : ''}
|
|
>
|
|
Save {hasUnsavedChanges && '*'}
|
|
</button>
|
|
<button
|
|
data-testid="preview-btn"
|
|
onClick={onPreview}
|
|
disabled={isLoading}
|
|
aria-label="Preview page"
|
|
>
|
|
Preview
|
|
</button>
|
|
<button
|
|
data-testid="exit-btn"
|
|
onClick={onExit}
|
|
disabled={isLoading}
|
|
aria-label="Exit editor"
|
|
>
|
|
Exit
|
|
</button>
|
|
{isLoading && (
|
|
<span data-testid="loading-indicator" className="loading">
|
|
Loading...
|
|
</span>
|
|
)}
|
|
{hasUnsavedChanges && !isLoading && (
|
|
<span data-testid="unsaved-indicator" className="unsaved-indicator">
|
|
Unsaved changes
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|