You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.2 KiB
48 lines
1.2 KiB
import { useState } from 'react';
|
|
|
|
import CommentCard from '~/components/offers/profile/comments/CommentCard';
|
|
|
|
import type { Reply } from '~/types/offers';
|
|
|
|
type Props = Readonly<{
|
|
comment: Reply;
|
|
profileId: string;
|
|
token?: string;
|
|
}>;
|
|
|
|
export default function ExpandableCommentCard({
|
|
comment,
|
|
profileId,
|
|
token = '',
|
|
}: Props) {
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
return (
|
|
<div>
|
|
<CommentCard
|
|
comment={comment}
|
|
handleExpanded={() => setIsExpanded(!isExpanded)}
|
|
isExpanded={isExpanded}
|
|
profileId={profileId}
|
|
replyLength={comment.replies?.length ?? 0}
|
|
token={token}
|
|
/>
|
|
{comment.replies && comment.replies.length > 0 && isExpanded && (
|
|
<div className="pt-4">
|
|
<ul className="space-y-4 pl-14" role="list">
|
|
{comment.replies.map((reply) => (
|
|
<li key={reply.id}>
|
|
<CommentCard
|
|
comment={reply}
|
|
disableReply={true}
|
|
profileId={profileId}
|
|
token={token}
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|