|
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
import AnimatedProgressBar from "../../AnimatedProgressBar";
|
|
|
|
import TitleSubtitle from "../../TitleSubtitle";
|
|
|
|
|
|
|
|
import ellipse from "./Ellipse.svg";
|
|
|
|
|
|
|
|
const Design2 = ({ title, incomes }) => {
|
|
|
|
const [progressFlag, setProgressFlag] = useState(false);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
setTimeout(() => {
|
|
|
|
setProgressFlag(true);
|
|
|
|
}, 100);
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="bg-white rounded shadow mx-auto py-7 px-4">
|
|
|
|
{/* title */}
|
|
|
|
<TitleSubtitle subTitle={false} />
|
|
|
|
{/* circles */}
|
|
|
|
{incomes.map((income, index) => (
|
|
|
|
<div key={index} className="flex flex-row items-center mt-4">
|
|
|
|
<img src={income.image} alt="" className="w-14 rounded-full" />
|
|
|
|
<AnimatedProgressBar />
|
|
|
|
<p>{income.percentNumb}</p>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Design2;
|
|
|
|
|
|
|
|
Design2.defaultProps = {
|
|
|
|
title: "میزان فروش محصولات",
|
|
|
|
|
|
|
|
incomes: [
|
|
|
|
{
|
|
|
|
image: ellipse,
|
|
|
|
bgColor: "#26E58C",
|
|
|
|
width: "96%",
|
|
|
|
percentNumb: "110",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: ellipse,
|
|
|
|
bgColor: "#FFEE00",
|
|
|
|
width: "44%",
|
|
|
|
percentNumb: "72",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: ellipse,
|
|
|
|
bgColor: "#EC4C19",
|
|
|
|
width: "20%",
|
|
|
|
percentNumb: "20",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
image: ellipse,
|
|
|
|
bgColor: "#0077FF",
|
|
|
|
width: "75%",
|
|
|
|
percentNumb: "80",
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|