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
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;
|
|
|