diff --git a/src/components/Partials/RightSideBar.jsx b/src/components/Partials/RightSideBar.jsx index 585dbe6..15d821e 100644 --- a/src/components/Partials/RightSideBar.jsx +++ b/src/components/Partials/RightSideBar.jsx @@ -13,6 +13,7 @@ import LtcIco from "../Helpers/Icons/LtcIco"; import Usdt from "../Helpers/Icons/Usdt"; import SelectBox from "../Helpers/SelectBox"; import { NavLink } from "react-router-dom"; +import SideStatistics from "./SideStatistics"; export default function RightSideBar() { const filterDatas = ["Last 15 days", "Last Month", "Last 6 month"]; @@ -201,129 +202,129 @@ export default function RightSideBar() { -
-
-
-

- Statistics -

- -
-
- -
- - - - - - - - - - - - - - - - - -
-
-
-
-
-

- Your All Artwork Statistics -

-
-
-
    -
  • - -
    - - Profit : - - - {/* don't change variable only change state */} - {filterDataSet[0]}% - -
    -
    • -
  • - -
    - - Total Sold : - - - {/* don't change variable only change state */} - {filterDataSet[1]}% - -
    -
    • -
  • - -
    - - Total Sold : - - - {/* don't change variable only change state */} - {filterDataSet[2]}% - -
    -
    • -
  • - -
    - - Total Sold : - - - {/* don't change variable only change state */} - {filterDataSet[3]}% - -
    -
    • -
-
-
-
- + {/*
*/} + {/*
*/} + {/*
*/} + {/*

*/} + {/* Statistics*/} + {/*

*/} + {/* */} + {/*
*/} + {/*
*/} + {/* */} + {/*
*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/*

*/} + {/* Your All Artwork Statistics*/} + {/*

*/} + {/*
*/} + {/*
*/} + {/*
    */} + {/*
  • */} + {/* */} + {/*
    */} + {/* */} + {/* Profit :*/} + {/* */} + {/* */} + {/* /!* don't change variable only change state *!/*/} + {/* {filterDataSet[0]}%*/} + {/* */} + {/*
    */} + {/*
    • */} + {/*
  • */} + {/* */} + {/*
    */} + {/* */} + {/* Total Sold :*/} + {/* */} + {/* */} + {/* /!* don't change variable only change state *!/*/} + {/* {filterDataSet[1]}%*/} + {/* */} + {/*
    */} + {/*
    • */} + {/*
  • */} + {/* */} + {/*
    */} + {/* */} + {/* Total Sold :*/} + {/* */} + {/* */} + {/* /!* don't change variable only change state *!/*/} + {/* {filterDataSet[2]}%*/} + {/* */} + {/*
    */} + {/*
    • */} + {/*
  • */} + {/* */} + {/*
    */} + {/* */} + {/* Total Sold :*/} + {/* */} + {/* */} + {/* /!* don't change variable only change state *!/*/} + {/* {filterDataSet[3]}%*/} + {/* */} + {/*
    */} + {/*
    • */} + {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + ); diff --git a/src/components/Partials/SideStatistics.jsx b/src/components/Partials/SideStatistics.jsx new file mode 100644 index 0000000..a02db0e --- /dev/null +++ b/src/components/Partials/SideStatistics.jsx @@ -0,0 +1,159 @@ +import React, { useState } from "react"; +import DoughnutChart from "../Charts/DoughnutChart"; +import SelectBox from "../Helpers/SelectBox"; + +export default function SideStatistics() { + const filterDatas = ["Last 15 days", "Last Month", "Last 6 month"]; + const [filterDataSet, setFilterDataSet] = useState([10, 30, 20, 40]); + const dataSetHandler = (value) => { + if (value === "Last 15 days") { + setFilterDataSet([10, 30, 20, 40]); + } else if (value === "Last Month") { + setFilterDataSet([15, 35, 10, 20]); + } else { + setFilterDataSet([8, 15, 40, 30]); + } + }; + + const [selectedRate, setSelectedRate] = useState("ETH"); + const [rateStaticsDropdown, setRateStaticsDropdown] = useState(false); + const [filterRateStatics, setFilterRateStatics] = useState([50, 30, 90, 20]); + const rateDataSetHandler = (value) => { + setSelectedRate(value); + if (value === "USD") { + setFilterRateStatics([50, 30, 90, 20]); + } else if (value === "BTC") { + setFilterRateStatics([15, 35, 10, 20]); + } else { + setFilterRateStatics([8, 15, 20, 30]); + } + setRateStaticsDropdown(!filterRateStatics); + }; + return ( + <> +
+
+
+

+ Statistics +

+ +
+
+ +
+ + + + + + + + + + + + + + + + + +
+
+
+
+
+

+ Your All Artwork Statistics +

+
+
+
    +
  • + +
    + + Profit : + + + {/* don't change variable only change state */} + {filterDataSet[0]}% + +
    +
    • +
  • + +
    + + Total Sold : + + + {/* don't change variable only change state */} + {filterDataSet[1]}% + +
    +
    • +
  • + +
    + + Total Sold : + + + {/* don't change variable only change state */} + {filterDataSet[2]}% + +
    +
    • +
  • + +
    + + Total Sold : + + + {/* don't change variable only change state */} + {filterDataSet[3]}% + +
    +
    • +
+
+
+
+ + + ); +}