update src/components/ProductSalesAmount/ProductSalesDesign1/index.js, src/components/ProductSalesAmount/ProductSalesDesign2/index.js and src/components/ProductSalesAmount/index.js

master
mahdi 3 years ago
parent dff50a1c50
commit 2cef87bd7a
  1. 14
      src/components/ProductSalesAmount/ProductSalesDesign1/index.js
  2. 14
      src/components/ProductSalesAmount/ProductSalesDesign2/index.js
  3. 2
      src/components/ProductSalesAmount/index.js

@ -1,10 +1,7 @@
import React from "react"; import React from "react";
import TitleSubtitle from "../../TitleSubtitle"; import TitleSubtitle from "../../MiniComponents/TitleSubtitle";
import arrowDown from "./home-trend-down.svg"; const ProductSalesDesign1 = ({ price, incomes }) => {
import arrowUp from "./home-trend-up.svg";
const ProductSalesDesign1 = ({ title, price, incomes }) => {
return ( return (
<div className="bg-white rounded shadow mx-auto p-5"> <div className="bg-white rounded shadow mx-auto p-5">
{/* title */} {/* title */}
@ -49,7 +46,6 @@ const ProductSalesDesign1 = ({ title, price, incomes }) => {
export default ProductSalesDesign1; export default ProductSalesDesign1;
ProductSalesDesign1.defaultProps = { ProductSalesDesign1.defaultProps = {
title: "میزان فروش محصولات",
price: "196.209.810", price: "196.209.810",
incomes: [ incomes: [
@ -57,7 +53,7 @@ ProductSalesDesign1.defaultProps = {
name: "درآمد امروز", name: "درآمد امروز",
income: "138.916.431", income: "138.916.431",
percent: 27, percent: 27,
logo: arrowUp, logo: "images/ProductSalesDesign1home-trend-down.svg",
excerpt: excerpt:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.", "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.",
}, },
@ -65,7 +61,7 @@ ProductSalesDesign1.defaultProps = {
name: "درآمد روز گذشته", name: "درآمد روز گذشته",
income: "651.098.311", income: "651.098.311",
percent: -6, percent: -6,
logo: arrowDown, logo: "images/ProductSalesDesign1home-trend-down.svg",
excerpt: excerpt:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.", "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.",
}, },
@ -73,7 +69,7 @@ ProductSalesDesign1.defaultProps = {
name: "درآمد امروز", name: "درآمد امروز",
income: "138.916.431", income: "138.916.431",
percent: 27, percent: 27,
logo: arrowUp, logo: "images/ProductSalesDesign1home-trend-down.svg",
excerpt: excerpt:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.", "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.",
}, },

@ -1,12 +1,10 @@
import React from "react"; import React from "react";
import AnimatedProgressBar from "../../AnimatedProgressBar"; import AnimatedProgressBar from "../../AnimatedProgressBar";
import TitleSubtitle from "../../TitleSubtitle"; import TitleSubtitle from "../../MiniComponents/TitleSubtitle";
import ellipse from "./Ellipse.svg";
const ProductSalesDesign2 = ({ incomes }) => { const ProductSalesDesign2 = ({ incomes }) => {
return ( return (
<div className="bg-white rounded shadow mx-auto py-7 px-4"> <div className="w-full bg-white rounded shadow mx-auto py-7 px-4">
{/* title */} {/* title */}
<TitleSubtitle subTitle={false} /> <TitleSubtitle subTitle={false} />
{/* circles */} {/* circles */}
@ -30,22 +28,22 @@ export default ProductSalesDesign2;
ProductSalesDesign2.defaultProps = { ProductSalesDesign2.defaultProps = {
incomes: [ incomes: [
{ {
image: ellipse, image: "images/ProductSalesDesign2Ellipse.svg",
bgColor: "#26E58C", bgColor: "#26E58C",
percent: "99", percent: "99",
}, },
{ {
image: ellipse, image: "images/ProductSalesDesign2Ellipse.svg",
bgColor: "#FFEE00", bgColor: "#FFEE00",
percent: "72", percent: "72",
}, },
{ {
image: ellipse, image: "images/ProductSalesDesign2Ellipse.svg",
bgColor: "#EC4C19", bgColor: "#EC4C19",
percent: "20", percent: "20",
}, },
{ {
image: ellipse, image: "images/ProductSalesDesign2Ellipse.svg",
bgColor: "#0077FF", bgColor: "#0077FF",
percent: "80", percent: "80",
}, },

@ -6,7 +6,7 @@ import ProductSalesDesign2 from "./ProductSalesDesign2";
function ProductSalesAmount() { function ProductSalesAmount() {
const list = { const list = {
1: <ProductSalesDesign1 />, 1: <ProductSalesDesign1 />,
1: <ProductSalesDesign2 />, 2: <ProductSalesDesign2 />,
}; };
const [type, setType] = useState(1); const [type, setType] = useState(1);
return ( return (

Loading…
Cancel
Save