State.init({ key: "", value: "", }); const keyLabel = props.keyLabel || "Key"; const keyPlaceholder = props.keyPlaceholder || "Key"; const valueLabel = props.valueLabel || "Value"; const valuePlaceHolder = props.valuePlaceHolder || "Value"; const confirmText = props.confirmText || "Save"; const onConfirm = props.onConfirm; const Container = styled.div` display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 0px; gap: 0.45em; width: 100%; `; const Label = styled.label` font-style: normal; font-weight: 600; font-size: 0.95em; line-height: 1.25em; color: #344054; margin-top: 3%; `; const Input = styled.textarea` box-sizing: border-box; display: flex; flex-direction: row; align-items: center; padding: 0.5em 0.75em; width: 100%; gap: 0.5em; background: #ffffff; border: 1px solid #d0d5dd; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); border-radius: 4px; margin-top: 3px; `; const ModalFooter = styled.div` padding-top: 4px; display: flex; flex-direction: row; justify-content: space-between; align-items: items-center; margin-top: 5%; `; const CloseButton = styled.button` display: flex; align-items: center; justify-content: center; background-color: white; padding: 0.7em; border-radius: 6px; border: 0; color: #344054; transition: 300ms; &:hover { background-color: #d3d3d3; } `; const ConfirmButton = styled.button` padding: 0.7em; border-radius: 6px; border: 0; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); background-color: #12b76a; color: white; transition: background-color 0.2s ease-in-out; &:hover { background-color: #0e9f5d; } `; const handleOnConfirm = () => { console.log(state.key + state.value); }; const onKeyChange = ({ target }) => { State.update({ key: target.value }); }; const onValueChange = ({ target }) => { State.update({ value: target.value }); }; return ( <> <Container> <Label>{keyLabel}</Label> <Input placeholder={keyPlaceholder} value={state.key} onChange={onKeyChange} rows={1} /> <Label>{valueLabel}</Label> <Input placeholder={valuePlaceHolder} value={state.value} onChange={onValueChange} rows={1} /> </Container> <ModalFooter> <CloseButton onClick={onClose}>Cancel</CloseButton> <ConfirmButton onClick={handleOnConfirm}>{confirmText}</ConfirmButton> </ModalFooter> </> );