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.
 
 
 

53 lines
1.1 KiB

import React from "react";
import AnimatedProgressBar from "../../AnimatedProgressBar";
import TitleSubtitle from "../../TitleSubtitle";
import ellipse from "./Ellipse.svg";
const Design2 = ({ incomes }) => {
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 = {
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",
},
],
};