update 5 files

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

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

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

@ -1,67 +1,63 @@
import React, { useEffect, useState } from "react"; 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 Design2 = ({ title, incomes }) => {
const [progressFlag,setProgressFlag] = useState(false); const [progressFlag, setProgressFlag] = useState(false);
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
setProgressFlag(true); setProgressFlag(true);
},100); }, 100);
},[]); }, []);
return <section className="my-20"> return (
<div className="bg-white w-4/12 rounded shadow mx-auto py-7 px-4"> <div className="bg-white rounded shadow mx-auto py-7 px-4">
{/* title */} {/* title */}
<div className="flex flex-row items-center mb-7"> <TitleSubtitle subTitle={false} />
<div className="w-1 h-5 bg-blue-600 rounded ml-1"></div> {/* circles */}
<h2 className="text-base">{title}</h2> {incomes.map((income, index) => (
</div> <div key={index} className="flex flex-row items-center mt-4">
{/* circles */} <img src={income.image} alt="" className="w-14 rounded-full" />
{incomes.map((income,index) =>( <AnimatedProgressBar />
<div className="flex flex-row items-center mt-4"> <p>{income.percentNumb}</p>
<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> </div>
<p>{income.percentNumb}</p> ))}
</div> </div>
))} );
</div>
</section>;
}; };
export default Design2; export default Design2;
Design2.defaultProps = { Design2.defaultProps = {
title: 'میزان فروش محصولات', title: "میزان فروش محصولات",
incomes: [ incomes: [
{ {
image: ellipse, image: ellipse,
bgColor :'#26E58C', bgColor: "#26E58C",
width : '96%', width: "96%",
percentNumb : '110', percentNumb: "110",
}, },
{ {
image: ellipse, image: ellipse,
bgColor :'#FFEE00', bgColor: "#FFEE00",
width : '44%', width: "44%",
percentNumb : '72', percentNumb: "72",
}, },
{ {
image: ellipse, image: ellipse,
bgColor :'#EC4C19', bgColor: "#EC4C19",
width : '20%', width: "20%",
percentNumb : '20', percentNumb: "20",
}, },
{ {
image: ellipse, image: ellipse,
bgColor :'#0077FF', bgColor: "#0077FF",
width : '75%', width: "75%",
percentNumb : '80', percentNumb: "80",
}, },
] ],
} };

Loading…
Cancel
Save