import { useState } from "react" import { Save, X } from "react-feather" import { IconButton, TextInput } from "../../../../components" import { TitleLayout } from "./TitleLayout" type EditModeProps = { label: string onSave: (label: string) => void onAbort: () => void } export const EditMode = ({ label, onSave, onAbort }: EditModeProps) => { const [newLabel, setNewLabel] = useState(label) return ( <TitleLayout> <div> <TextInput value={newLabel} onChange={setNewLabel} /> </div> <div> <IconButton icon={Save} label={`Save changes`} onClick={() => onSave(newLabel)} /> <IconButton icon={X} label={`Discard changes`} onClick={onAbort} /> </div> </TitleLayout> ) }