const createTask = props.createTask ?? ((taskTitle, taskDescription) => console.log(`Create task ${taskTitle} with description ${taskDescription}`)); const AddTaskContainer = styled.div` display: flex; flex-direction: column; color: white; background-color: transparent; `; const AddTaskIcon = styled.div` color: #777583; `; const AddTaskButton = styled.div` display: flex; flex-direction: row; justify-content: center; align-items: center; color: #FFFFFF; background-color: #1E1F28; width: 240px; padding: 16px; gap: 4px; border-radius: 4px; :hover { opacity: 0.8; ${AddTaskIcon} { color: #FFFFFF; } } `; const toggle = <AddTaskButton> <AddTaskIcon> <i class="bi bi-plus-circle-fill"></i> </AddTaskIcon> <text>Add new Card</text> </AddTaskButton> const Content = () => { State.init({ taskTitle: "", taskDescription: ""}); return ( <AddTaskContainer> <h4>New Task</h4> <input type="text" value={state.taskTitle} onChange={(e) => State.update({taskTitle: e.target.value})} /> <input type="text" value={state.taskDescription} onChange={(e) => State.update({taskDescription: e.target.value})} /> <button onClick={() => createTask(state.taskTitle, state.taskDescription)}>Create</button> </AddTaskContainer> ); } return ( <> <Widget src="calimero.testnet/widget/Calimero.TaskChain.BaseModal" props={{ toggle, title: "Create Task", content: <Content createTask={createTask} />, }} /></> );