71 lines
2.3 KiB
JavaScript
71 lines
2.3 KiB
JavaScript
import { formatDate, t } from "@/utils";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import StarRating from "./StarRating";
|
|
import CustomImage from "@/components/Common/CustomImage";
|
|
|
|
const SellerReviewCard = ({ rating }) => {
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
const [isTextOverflowing, setIsTextOverflowing] = useState(false);
|
|
const textRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const checkOverflow = () => {
|
|
const content = textRef.current;
|
|
if (content) {
|
|
setIsTextOverflowing(content.scrollHeight > content.clientHeight);
|
|
}
|
|
};
|
|
checkOverflow();
|
|
window.addEventListener("resize", checkOverflow);
|
|
return () => window.removeEventListener("resize", checkOverflow);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="bg-white p-4 rounded-lg flex flex-col gap-4">
|
|
<div className="flex sm:items-center gap-4 flex-col sm:flex-row">
|
|
<CustomImage
|
|
src={rating?.buyer?.profile}
|
|
width={72}
|
|
height={72}
|
|
alt="Reviewer"
|
|
className="aspect-square rounded-full object-cover"
|
|
/>
|
|
<div className="flex flex-col gap-1 w-full">
|
|
<p className="font-semibold">{rating?.buyer?.name}</p>
|
|
|
|
<div className="flex items-center justify-between flex-wrap gap-1 w-full">
|
|
<div className="flex items-center gap-1">
|
|
<StarRating rating={Number(rating?.ratings)} size={24} />
|
|
<span className="text-sm text-muted-foreground">
|
|
{rating?.ratings}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm justify-self-end">
|
|
{formatDate(rating?.created_at)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="border-b"></div>
|
|
|
|
<div>
|
|
<p ref={textRef} className={`${!isExpanded ? "line-clamp-2" : ""}`}>
|
|
{rating?.review}
|
|
</p>
|
|
{isTextOverflowing && (
|
|
<div className="flex justify-center mt-1">
|
|
<button
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
|
className="text-primary text-sm hover:underline"
|
|
>
|
|
{isExpanded ? t("seeLess") : t("seeMore")}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SellerReviewCard;
|