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
67 lines
1.6 KiB
3 years ago
|
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',
|
||
|
},
|
||
|
]
|
||
|
}
|