update 5 files

master
mahdi 2 years ago
parent 4127021e17
commit c3ec6d7ff9
  1. 10
      src/App.js
  2. 36
      src/components/AnimatedProgressBar/index.js
  3. 74
      src/components/ProductSalesAmount/Design2/index.js

@ -161,7 +161,7 @@ function App() {
{/* <CourseChapter /> */}
<Design1 />
{/* <Design1 /> */}
<Design2 />
{/* <SidebarMenu /> */}
@ -214,9 +214,9 @@ function App() {
{/* <PopupCard /> */}
{/* ----------------------------$$$ start---------------------------- */}
{/* <CircleInCircle />
<TimeLine />
<SelectYear /> */}
{/* <CircleInCircle /> */}
{/* <TimeLine /> */}
{/* <SelectYear /> */}
{/* ----------------------------$$$ end---------------------------- */}
{/* <TimeLineComponent /> */}
@ -265,7 +265,7 @@ function App() {
{/* <DateRangePicker /> */}
{/* ----------------------------$$$ end---------------------------- */}
<FormInput />
{/* <FormInput /> */}
{/* <LeafletMap /> */}

@ -1,24 +1,28 @@
import React, { useEffect, useState } from "react";
const AnimatedProgressBar = ({rangeWidth, parentBg, childBg}) => {
const [progressBar, setProgressBar] = useState(false);
const AnimatedProgressBar = ({ rangeWidth, parentBg, childBg }) => {
const [progressBar, setProgressBar] = useState(false);
useEffect(() => {
setTimeout(() => {
setProgressBar(true);
}, 1000);
}, []);
useEffect(() => {
setTimeout(() => {
setProgressBar(true);
}, 1000);
}, []);
return (
<div className={`flex-row w-full rounded-full h-2 mt-4 ${parentBg}`} style={{direction: "ltr"}}>
<div className={`h-2 rounded-full dark:bg-gray-300 duration-500 ${childBg}`} style={{ width: progressBar ? rangeWidth : 0}}></div>
</div> )
}
<div className={`flex-row w-full rounded-full h-2 ${parentBg}`}>
<div
className={`h-2 rounded-full dark:bg-gray-300 duration-500 ${childBg}`}
style={{ width: progressBar ? rangeWidth : 0 }}
></div>
</div>
);
};
export default AnimatedProgressBar
export default AnimatedProgressBar;
AnimatedProgressBar.defaultProps = {
rangeWidth: "75%",
parentBg: "bg-gray-200",
childBg: "bg-gray-600",
}
rangeWidth: "75%",
parentBg: "bg-gray-200",
childBg: "bg-gray-600",
};

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

Loading…
Cancel
Save