import { useState } from "react" import { css } from "@emotion/react" import styled from "@emotion/styled/macro" import { Save, X } from "react-feather" import { IconButton, TextInput } from "../../" import { RowElement } from "../EditableRow" const Wrapper = styled.div` ${({ theme: { space, color } }) => css` height: auto; padding: ${space.large}; margin: ${space.large}; display: flex; gap: ${space.medium}; flex-direction: column; border: 2px solid ${color.bg.shade}; `} ` type ItemEditModeProps = RowElement & { onSave: (bookmark: RowElement) => void onAbort: () => void } export const ItemEditMode = ({ label, url, onSave, onAbort, }: ItemEditModeProps) => { const [newLabel, setNewLabel] = useState(label) const [newUrl, setNewUrl] = useState(url) const newBookmark: RowElement = { label: newLabel, url: newUrl, } return ( <Wrapper> <TextInput label="Label" value={newLabel} onChange={setNewLabel} /> <TextInput label="Url" value={newUrl} onChange={setNewUrl} /> <div> <IconButton icon={Save} label="Save changes" onClick={() => onSave(newBookmark)} /> <IconButton icon={X} label="Discard changes" onClick={onAbort} /> </div> </Wrapper> ) }