// reply number // timestamp of last reply const Container = styled.div` padding-left: 1rem; padding-top: 0.2rem; padding-bottom: 0.2rem; padding-right: 1rem; margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; color: #fff; border-radius: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; ${({ ownMessage, clickable }) => ownMessage ? `background-color: #5765F2; border-radius: 8px; ${ clickable && ":hover { background-color: #545CCD; cursor: pointer; }" }` : `background-color: #1E1F28; border-radius: 8px; ${ clickable && ":hover { background-color: #3C3E52; cursor: pointer; }" }`} max-width: 400px; `; const ReplyText = styled.div` font-size: 0.875rem; line-height: 1.25rem; `; const TimestampText = styled.div` font-size: 0.75rem; line-height: 1rem; color: #adb5bd; `; const LeftContainer = styled.div` display: flex; justify-content: space-between; align-items: center; column-gap: 1rem; `; return ( <Container ownMessage={props.ownMessage} clickable={true} onClick={() => props.onClick()} > <LeftContainer> <ReplyText>{props.replyCount} Replies</ReplyText> <TimestampText>{props.time}</TimestampText> </LeftContainer> <i class="bi bi-reply-all-fill"></i> </Container> );