manifold/web/components/comments/reply-toggle.tsx

30 lines
749 B
TypeScript
Raw Normal View History

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>
)
}