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.

67 lines
1.6 KiB

import React, { useEffect, useState } from "react";
import ellipse from './Ellipse.svg';
const Design2 = ({title,incomes}) => {
const [progressFlag,setProgressFlag] = useState(false);
useEffect(() => {
setTimeout(() => {
setProgressFlag(true);
},100);
},[]);
return <section className="my-20">
<div className="bg-white w-4/12 rounded shadow mx-auto py-7 px-4">
{/* title */}
<div className="flex flex-row items-center mb-7">
<div className="w-1 h-5 bg-blue-600 rounded ml-1"></div>
<h2 className="text-base">{title}</h2>
</div>
{/* circles */}
{incomes.map((income,index) =>(
<div className="flex flex-row items-center mt-4">
<img src={income.image} alt="" className="w-14 rounded-full" />
<div className="h-3 w-full rounded mt-2 mr-2 ml-4" style={{background:"#EDF2FB"}}>
<div className={`h-3 rounded duration-500 `}
style={{background:income.bgColor, width: progressFlag ? income.width : 0,}}></div>
</div>
<p>{income.percentNumb}</p>
</div>
))}
</div>
</section>;
};
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',
},
]
}