const { task, submitComment, children } = props; const CommentForm = ({ onAddComment }) => { const FormContainer = styled.div` display: flex; align-items: center; `; const CommentInput = styled.input` flex: 1; padding: 8px; border: 1px solid gray; border-radius: 4px; margin-right: 8px; `; const AddButton = styled.button` background-color: #5f9ea0; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; `; State.init({ comment: "" }); const handleInputChange = (event) => { State.update({ comment: event.target.value }); }; const handleAddComment = () => { if (state.comment.trim() !== "") { onAddComment(state.comment); State.update({ comment: "" }); } }; return ( <FormContainer> <CommentInput type="text" placeholder="Add a comment..." value={comment} onChange={handleInputChange} /> <AddButton onClick={handleAddComment}>Add</AddButton> </FormContainer> ); }; const Wrapper = styled.div` .ButtonTransparent { background-color: #0000; border: none; } .DialogOverlay { background-color: var(--blackA9); position: fixed; inset: 0; animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1); } .DialogContent { background-color: white; border-radius: 6px; box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90vw; max-width: 450px; max-height: 85vh; padding: 25px; animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1); z-index: 10; } .DialogContent:focus { outline: none; } .DialogTitle { margin: 0; font-weight: 500; color: var(--mauve12); font-size: 17px; } .DialogDescription { margin: 10px 0 20px; color: var(--mauve11); font-size: 15px; line-height: 1.5; } `; const { id, title, description, assignee, comments } = task; return ( <Wrapper> <Dialog.Root> <Dialog.Trigger asChild> <button className="ButtonTransparent">{children[1]}</button> </Dialog.Trigger> <Dialog.Overlay className="DialogOverlay" /> <Dialog.Content className="DialogContent"> <Dialog.Title className="DialogTitle">{title}</Dialog.Title> <Dialog.Description className="DialogDescription"> {description} </Dialog.Description> <div className="issue-assignee">Assignee: {assignee}</div> {(comments || []).map((comment) => ( <div key={comment.id}> <div className="comment-author">{comment.member_id}</div> <div className="comment-message">{comment.message}</div> </div> ))} <CommentForm onAddComment={(message) => submitComment(id, message)} /> <div style={{ display: "flex", marginTop: 25, justifyContent: "flex-end", }} > <Dialog.Close asChild> <button className="Button green">Save changes</button> </Dialog.Close> </div> <Dialog.Close asChild> <button className="IconButton" aria-label="Close"> X </button> </Dialog.Close> </Dialog.Content> </Dialog.Root> </Wrapper> );