30 lines
749 B
TypeScript
30 lines
749 B
TypeScript
import clsx from 'clsx'
|
|
import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
|
|
import { Row } from '../layout/row'
|
|
|
|
export function ReplyToggle(props: {
|
|
seeReplies: boolean
|
|
numComments: number
|
|
onClick: () => void
|
|
}) {
|
|
const { seeReplies, numComments, onClick } = props
|
|
return (
|
|
<button
|
|
className={clsx(
|
|
'text-left text-sm text-indigo-600',
|
|
numComments === 0 ? 'hidden' : ''
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
<Row className="items-center gap-1">
|
|
<div>
|
|
{numComments} {numComments === 1 ? 'Reply' : 'Replies'}
|
|
</div>
|
|
<TriangleDownFillIcon
|
|
className={clsx('h-2 w-2', seeReplies ? 'rotate-180' : '')}
|
|
/>
|
|
</Row>
|
|
</button>
|
|
)
|
|
}
|