43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import { Answer } from 'common/answer'
|
|
import { Contract } from 'common/contract'
|
|
import React, { useEffect, useRef } from 'react'
|
|
import { Col } from 'web/components/layout/col'
|
|
import { Row } from 'web/components/layout/row'
|
|
import { Avatar } from 'web/components/avatar'
|
|
import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
|
|
import { useRouter } from 'next/router'
|
|
import { UserLink } from 'web/components/user-link'
|
|
|
|
export function CommentsAnswer(props: { answer: Answer; contract: Contract }) {
|
|
const { answer, contract } = props
|
|
const { username, avatarUrl, name, text } = answer
|
|
const answerElementId = `answer-${answer.id}`
|
|
const router = useRouter()
|
|
const highlighted = router.asPath.endsWith(`#${answerElementId}`)
|
|
const answerRef = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
if (highlighted && answerRef.current != null) {
|
|
answerRef.current.scrollIntoView(true)
|
|
}
|
|
}, [highlighted])
|
|
|
|
return (
|
|
<Col className="bg-greyscale-2 w-fit gap-1 rounded-t-xl rounded-bl-xl py-2 px-4">
|
|
<Row className="gap-2">
|
|
<Avatar username={username} avatarUrl={avatarUrl} size="xxs" />
|
|
<div className="text-greyscale-6 text-xs">
|
|
<UserLink username={username} name={name} /> answered
|
|
<CopyLinkDateTimeComponent
|
|
prefix={contract.creatorUsername}
|
|
slug={contract.slug}
|
|
createdTime={answer.createdTime}
|
|
elementId={answerElementId}
|
|
/>
|
|
</div>
|
|
</Row>
|
|
<div className="text-sm">{text}</div>
|
|
</Col>
|
|
)
|
|
}
|