const Container = styled.div` width: 100% display: flex; flex-direction: column; justify-content: start; align-items: center; `; const ButtonContainer = styled.div` display: flex; flex-direction: row; justify-content: start; align-items: center; gap: 10px; margin-top: 8px; `; const InputCommentField = styled.input` color: #fff; height: 40px; width: 100%; padding: 8px 16px 8px 16px; border-radius: 6px; background-color: #0e0e10; border: none; :focus { outline-color: #D0FC42; outline-style: solid; outline-width: 1px; } `; const FunctionButton = styled.button` ${({ backgroundColor }) => backgroundColor && `background-color: ${backgroundColor};`} ${({ color }) => (color ? `color: ${color};` : "color: #fff;")} :hover { ${({ hoverColor }) => hoverColor && `background-color: ${hoverColor};`} ${({ hoverOutline }) => hoverOutline && `outline-color: ${hoverOutline}; outline-style: solid; outline-width: 1px;`} } border-radius: 4px; padding: 8px 16px 8px 16px; border: none; `; const [showMarkdown, setShowMarkdown] = useState(false); const [comment, setComment] = useState(""); const [buttonVisible, setButtonsVisible] = useState(false); const handleCommentChange = (e) => { setComment(e.target.value); }; const handleOnClose = () => { setButtonsVisible(false); setComment(""); } return ( <Container> <InputCommentField value={comment} onClick={() => setButtonsVisible(true)} onChange={handleCommentChange} placeholder="Add a comment" autoFocus /> {buttonVisible && ( <ButtonContainer> <FunctionButton backgroundColor="#D0FC42" color="black" hoverColor="#BBE33B" > Post </FunctionButton> <FunctionButton backgroundColor="transparent" color="#fff" hoverOutline="#D0FC42" onClick={handleOnClose} > Cancel </FunctionButton> </ButtonContainer> )} </Container> );