const Header = styled.div` width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; `; const Title = styled.div` font-size: 24px; line-height: 33.6px; `; const Form = styled.div` display: flex; flex-direction: column; gap: 4px; `; const Input = styled.input` width: 100%; `; const TextArea = styled.textarea` width: 100%; `; const ButtonRow = styled.div` display: flex; flex-direction: row; gap: 4px; `; const typeStr = evrything.near/type/Test; const type = Type.get(typeStr); State.init(JSON.parse({"test1":"","test3":"","test4":""})) function composeData() { const data = { thing: { main: JSON.stringify(state), }, index: { VERSION: JSON.stringify({ key: "main", value: { type: typeStr, }, }), }, }; return data; } return ( <> <Header> <Title>{typeStr.split("/")[2]}</Title> </Header> <Form><Input placeholder=test1 onChange={({ target }) => State.update({ [test1]: target.value })} />,<Input placeholder=test3 onChange={({ target }) => State.update({ [test3]: target.value })} />,<TextArea placeholder=test4 onInput={({ target }) => State.update({ [test4]: target.value })} /><ButtonRow> <CommitButton disabled={!state.title} force data={composeData} onCommit={resetThing} > create </CommitButton> </ButtonRow> </Form> </> );