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
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", |
|
}, |
|
], |
|
};
|
|
|