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.

64 lines
1.4 KiB

import React, { useEffect, useState } from "react";
3 years ago
import AnimatedProgressBar from "../../AnimatedProgressBar";
import TitleSubtitle from "../../TitleSubtitle";
3 years ago
import ellipse from "./Ellipse.svg";
3 years ago
const Design2 = ({ title, incomes }) => {
const [progressFlag, setProgressFlag] = useState(false);
useEffect(() => {
setTimeout(() => {
setProgressFlag(true);
3 years ago
}, 100);
}, []);
3 years ago
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>
3 years ago
))}
</div>
);
};
export default Design2;
Design2.defaultProps = {
3 years ago
title: "میزان فروش محصولات",
incomes: [
{
image: ellipse,
3 years ago
bgColor: "#26E58C",
width: "96%",
percentNumb: "110",
},
{
image: ellipse,
3 years ago
bgColor: "#FFEE00",
width: "44%",
percentNumb: "72",
},
{
image: ellipse,
3 years ago
bgColor: "#EC4C19",
width: "20%",
percentNumb: "20",
},
{
image: ellipse,
3 years ago
bgColor: "#0077FF",
width: "75%",
percentNumb: "80",
},
3 years ago
],
};