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.
 
 
 

112 lines
3.3 KiB

import React from "react";
import separate from "../../../utils/separate";
//components
import StarRating from "../../../components/StarRating";
import Progress from "../../../components/Progress";
function Rate({ desktop, productId, rateDetail }) {
const fiveCount = React.useMemo(() => {
return rateDetail?.find((rate) => rate?.rate === 5);
}, [rateDetail]);
const fourCount = React.useMemo(() => {
return rateDetail?.find((rate) => rate?.rate === 4);
}, [rateDetail]);
const threeCount = React.useMemo(() => {
return rateDetail?.find((rate) => rate?.rate === 3);
}, [rateDetail]);
const twoCount = React.useMemo(() => {
return rateDetail?.find((rate) => rate?.rate === 2);
}, [rateDetail]);
const oneCount = React.useMemo(() => {
return rateDetail?.find((rate) => rate?.rate === 1);
}, [rateDetail]);
const allCount = React.useMemo(() => {
return rateDetail?.reduce((a, b) => a + b?.count, 0);
}, [rateDetail]);
const rate = React.useMemo(() => {
return rateDetail?.length
? ((oneCount?.count || 0) * 1 +
(twoCount?.count || 0) * 2 +
(threeCount?.count || 0) * 3 +
(fourCount?.count || 0) * 4 +
(fiveCount?.count || 0) * 5) /
rateDetail?.length
: 0;
}, [rateDetail]);
return (
<div className="w-full flex justify-between items-center mt-5">
<div className="flex flex-col items-center justify-center h-full ml-4">
{desktop ? (
<h1 className={`text-gray-600 mb-2 font-bold dark:text-white`}>
{rate}
</h1>
) : (
<strong
className={`text-blue5F mb-2 font-bold dark:text-white`}
style={{ fontSize: "calc(100vw / 10)" }}
>
{rate}
</strong>
)}
<div className="">
<StarRating value={rate} />
</div>
<span className="text-base text-gray70 mt-2 dark:text-white">
{" "}
{`از بین ${allCount} نفر`}
</span>
</div>
<ul className="p-0 m-0 list-none flex flex-col flex-1">
{[
{
name: "یک ستاره",
value: ((oneCount?.count || 0) / allCount) * 100,
},
{
name: "دو ستاره",
value: ((twoCount?.count || 0) / allCount) * 100,
},
{
name: "سه ستاره",
value: ((threeCount?.count || 0) / allCount) * 100,
},
{
name: "چهار ستاره",
value: ((fourCount?.count || 0) / allCount) * 100,
},
{
name: "پنج ستاره",
value: ((fiveCount?.count || 0) / allCount) * 100,
},
].map((item, index) => (
<li
key={index}
className="w-full flex flex-row-reverse items-center justify-between"
>
<span className="mr-2 text-xs text-blue5F dark:text-white">
{item.name}
</span>
{desktop ? (
<Progress deskTop percent={item.value} />
) : (
<Progress percent={item.value} />
)}
<span className="ml-2 text-xs text-blue5F dark:text-white">
{item.value + "%"}
</span>
</li>
))}
</ul>
</div>
);
}
export default Rate;