79 lines
1.9 KiB
TypeScript
79 lines
1.9 KiB
TypeScript
import React from 'react'
|
|
import { Undo2, Redo2, Save, Loader2 } from 'lucide-react'
|
|
import './FloatingToolbar.css'
|
|
import { SaveType } from '../html-editor/hooks/useEditState'
|
|
|
|
interface FloatingToolbarProps {
|
|
canUndo: boolean
|
|
canRedo: boolean
|
|
onUndo: () => void
|
|
onRedo: () => void
|
|
onSave: () => void
|
|
isSaving: boolean
|
|
saveType: SaveType
|
|
}
|
|
|
|
export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
|
|
canUndo,
|
|
canRedo,
|
|
onUndo,
|
|
onRedo,
|
|
onSave,
|
|
isSaving,
|
|
saveType,
|
|
}) => {
|
|
return (
|
|
<div className="ppt-floating-toolbar">
|
|
{/* Undo / Redo */}
|
|
<div className="ppt-floating-toolbar__history">
|
|
<button
|
|
type="button"
|
|
className="ppt-floating-toolbar__btn"
|
|
disabled={!canUndo}
|
|
onClick={onUndo}
|
|
title="Undo"
|
|
>
|
|
<Undo2 size={18} />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="ppt-floating-toolbar__btn"
|
|
disabled={!canRedo}
|
|
onClick={onRedo}
|
|
title="Redo"
|
|
>
|
|
<Redo2 size={18} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="ppt-floating-toolbar__divider" />
|
|
|
|
{/* Save area */}
|
|
{isSaving && saveType === 'auto' ? (
|
|
<div className="ppt-floating-toolbar__auto-saving">
|
|
<Loader2 size={16} className="ppt-floating-toolbar__spinner" />
|
|
<span>Auto-saving...</span>
|
|
</div>
|
|
) : isSaving && saveType === 'manual' ? (
|
|
<button
|
|
type="button"
|
|
className="ppt-floating-toolbar__save-btn ppt-floating-toolbar__save-btn--saving"
|
|
disabled
|
|
>
|
|
<Loader2 size={16} className="ppt-floating-toolbar__spinner" />
|
|
<span>Saving...</span>
|
|
</button>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className="ppt-floating-toolbar__save-btn"
|
|
onClick={onSave}
|
|
>
|
|
<Save size={16} />
|
|
<span>Save</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|