MyFit/users-myfit
2
0
Fork 0
Code Issues Pull Requests Releases Activity

Pages added

Browse Source
This commit is contained in:
Olu Amey
2023-01-25 13:20:56 -05:00
parent d096e33bc0
commit 33caedd8aa
11 changed files with 2514 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Routers.jsx
+5
View File
@@ -23,6 +23,9 @@ import UploadProductPage from "./views/UploadProductPage";
import UserProfilePage from "./views/UserProfilePage";
import VerifyYouPages from "./views/VerifyYouPages";
import RemindersPage from './views/RemindersPage';
import TrackingPage from "./views/TrackingPage";
export default function Routers() {
return (
<ScrollToTop>
@@ -51,6 +54,8 @@ export default function Routers() {
<Route exact path="/shop-details" element={<ShopDetailsPage />} />
<Route exact path="/my-wallet" element={<MyWalletPage />} />
<Route exact path="/my-collection" element={<MyCollection />} />
<Route exact path="/reminders" element={<RemindersPage />} />
<Route exact path="/tracking" element={<TrackingPage />} />
<Route
exact
path="/my-collection/collection-item"
src/components/Partials/RightSideBar.jsx
+4 -123
View File
@@ -165,133 +165,15 @@ export default function RightSideBar() {
</div>
</div>
</div>
<div className="chart-two bg-white dark:bg-dark-white rounded-2xl p-8 2xl:w-[268px] w-full 2xl:mb-10 flex flex-col justify-between border 2xl:border-none ">
<div>
{/* dropdown heading */}
<div className="flex space-x-2 items-center mb-5 relative cursor-pointer">
{/* icon area */}
<div className="icon-area">
{selectedRate === "LTC" ? (
<LtcIco />
) : selectedRate === "USD" ? (
<Usdt />
) : selectedRate === "BTC" ? (
<BtcIco />
) : (
<EthIco />
)}
</div>
{/* heading */}
<div
className="heading flex space-x-1 items-center"
onClick={() => setRateStaticsDropdown(!rateStaticsDropdown)}
>
<span className="text-xl font-bold text-dark-gray dark:text-white">
{selectedRate} rate
</span>
<span className="text-[#374557] dark:text-thin-light-gray">
<svg
width="14"
height="7"
viewBox="0 0 14 7"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="fill-current"
>
<path d="M13.7092 0.288658C13.6163 0.197192 13.5057 0.124593 13.3839 0.0750502C13.262 0.025507 13.1313 0 12.9993 0C12.8673 0 12.7366 0.025507 12.6148 0.0750502C12.4929 0.124593 12.3824 0.197192 12.2894 0.288658L7.70992 4.7581C7.61697 4.84956 7.50638 4.92216 7.38453 4.9717C7.26269 5.02125 7.132 5.04676 7 5.04676C6.868 5.04676 6.73731 5.02125 6.61547 4.9717C6.49362 4.92216 6.38303 4.84956 6.29008 4.7581L1.7106 0.288658C1.61765 0.197192 1.50706 0.124593 1.38521 0.0750502C1.26337 0.025507 1.13268 0 1.00068 0C0.868682 0 0.737991 0.025507 0.616146 0.0750502C0.4943 0.124593 0.383712 0.197192 0.29076 0.288658C0.10453 0.471497 0 0.718831 0 0.976639C0 1.23445 0.10453 1.48178 0.29076 1.66462L4.88024 6.14382C5.44268 6.69206 6.20509 7 7 7C7.79491 7 8.55732 6.69206 9.11976 6.14382L13.7092 1.66462C13.8955 1.48178 14 1.23445 14 0.976639C14 0.718831 13.8955 0.471497 13.7092 0.288658Z" />
</svg>
</span>
</div>
<div
className={`rate-statics-dropdown w-[164px] h-[170px] bg-white dark:bg-dark-white py-3 px-5 absolute rounded ${
rateStaticsDropdown ? "active" : ""
}`}
style={{ boxShadow: "0px 4px 87px 0px #0000002B" }}
>
<ul className="flex flex-col justify-between h-full">
<li
className="flex space-x-2.5 items-center cursor-pointer"
onClick={() => rateDataSetHandler("ETH")}
>
<span>
<EthIco />
</span>
<span className="text-thin-light-gray text-base tracking-wide">
ETH Rate
</span>
</li>
<li
className="flex space-x-2.5 items-center cursor-pointer"
onClick={() => rateDataSetHandler("USD")}
>
<span>
<Usdt />
</span>
<span className="text-thin-light-gray text-base tracking-wide">
USDT Rate
</span>
</li>
<li
className="flex space-x-2.5 items-center cursor-pointer"
onClick={() => rateDataSetHandler("BTC")}
>
<span>
<BtcIco />
</span>
<span className="text-thin-light-gray text-base tracking-wide">
BTC Rate
</span>
</li>
<li
className="flex space-x-2.5 items-center cursor-pointer"
onClick={() => rateDataSetHandler("LTC")}
>
<span>
<LtcIco />
</span>
<span className="text-thin-light-gray text-base tracking-wide">
LTC Rate
</span>
</li>
</ul>
</div>
</div>
{/* details Money */}
<div className="money-details mb-5">
<p className="text-xl font-bold text-dark-gray dark:text-white">
$7473.67 USD
</p>
<p className="text-sm text-light-green">+324.75 (11.5%)</p>
</div>
</div>
<div className="miniLineChart">
<MiniLineChart height="122px" datasets={filterRateStatics} />
</div>
</div>
{/* top-creator */}
<div className="top-creator bg-white dark:bg-dark-white rounded-2xl p-8 2xl:w-[268px] w-full 2xl:mb-10 2xl:border-none border ">
{/* heading */}
<div className="heading flex justify-between items-center mb-3.5">
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
Top creator
Recent
</h3>
<div className="flex space-x-1 items-center">
<span className="text-sm text-thin-light-gray">Weekly</span>
<span className="text-[#374557] dark:text-thin-light-gray">
<svg
width="13"
height="6"
viewBox="0 0 13 6"
className="fill-current"
xmlns="http://www.w3.org/2000/svg"
>
<path
opacity="0.7"
d="M12.4124 0.247421C12.3327 0.169022 12.2379 0.106794 12.1335 0.0643287C12.0291 0.0218632 11.917 0 11.8039 0C11.6908 0 11.5787 0.0218632 11.4743 0.0643287C11.3699 0.106794 11.2751 0.169022 11.1954 0.247421L7.27012 4.07837C7.19045 4.15677 7.09566 4.219 6.99122 4.26146C6.88678 4.30393 6.77476 4.32579 6.66162 4.32579C6.54848 4.32579 6.43646 4.30393 6.33202 4.26146C6.22758 4.219 6.13279 4.15677 6.05312 4.07837L2.12785 0.247421C2.04818 0.169022 1.95338 0.106794 1.84895 0.0643287C1.74451 0.0218632 1.63249 0 1.51935 0C1.40621 0 1.29419 0.0218632 1.18975 0.0643287C1.08531 0.106794 0.990517 0.169022 0.910844 0.247421C0.751218 0.404141 0.661621 0.616141 0.661621 0.837119C0.661621 1.0581 0.751218 1.2701 0.910844 1.42682L4.84468 5.26613C5.32677 5.73605 5.98027 6 6.66162 6C7.34297 6 7.99647 5.73605 8.47856 5.26613L12.4124 1.42682C12.572 1.2701 12.6616 1.0581 12.6616 0.837119C12.6616 0.616141 12.572 0.404141 12.4124 0.247421Z"
/>
</svg>
</span>
</div>
</div>
<div className="creator-list">
@@ -442,10 +324,9 @@ export default function RightSideBar() {
{/* heading */}
<div className="heading flex justify-between items-center mb-3.5">
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
Top Platform
Quick Links
</h3>
<div>
<span className="text-sm text-thin-light-gray">View all</span>
</div>
</div>
src/components/Partials/Sidebar.jsx
+25 -68
View File
@@ -115,7 +115,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
</li>
<li className="item group">
<NavLink
to="/active-bids"
to="/reminders"
className={`nav-item flex items-center ${
((navData) => (navData.isActive ? "active" : ""),
sidebar ? "justify-start space-x-3.5" : "justify-center")
@@ -136,6 +136,29 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
</span>
</NavLink>
</li>
<li className="item group">
<NavLink
to="/tracking"
className={`nav-item flex items-center ${
((navData) => (navData.isActive ? "active" : ""),
sidebar ? "justify-start space-x-3.5" : "justify-center")
}`}
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="active-bids" />
</span>
<span
className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
sidebar ? "active flex-1" : "w-0"
}`}
>
Tracking
<span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
19
</span>
</span>
</NavLink>
</li>
<li className="item group">
<NavLink
to="/active-bids"
@@ -152,56 +175,13 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
sidebar ? "active flex-1" : "w-0"
}`}
>
Active Bids
Calendar
<span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
19
</span>
</span>
</NavLink>
</li>
<li className="item group">
<NavLink
to="/market-place"
className={`nav-item flex items-center ${
((navData) => (navData.isActive ? "active" : ""),
sidebar ? "justify-start space-x-3.5" : "justify-center")
}`}
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="market" />
</span>
<span
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
sidebar ? "active flex-1" : "w-0"
}`}
>
Marketplace
<span className="absolute left-28 -top-1 text-sm flex justify-center items-center w-5 h-5 bg-purple rounded-full text-white">
09
</span>
</span>
</NavLink>
</li>
<li className="item group">
<NavLink
to="/my-wallet"
className={`nav-item flex items-center ${
((navData) => (navData.isActive ? "active" : ""),
sidebar ? "justify-start space-x-3.5" : "justify-center")
}`}
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="wallet-two" />
</span>
<span
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
sidebar ? "active flex-1" : "w-0"
}`}
>
My Wallet
</span>
</NavLink>
</li>
<li className="item group">
<NavLink
to="/my-collection"
@@ -245,29 +225,6 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
</span>
</NavLink>
</li>
<li className="item group">
<NavLink
to="/saved"
className={`nav-item flex items-center ${
((navData) => (navData.isActive ? "active" : ""),
sidebar ? "justify-start space-x-3.5" : "justify-center")
}`}
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="heart" />
</span>
<span
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
sidebar ? "active flex-1" : "w-0"
}`}
>
Saved
<span className="absolute left-14 -top-1 text-sm flex justify-center items-center w-5 h-5 bg-red-500 rounded-full text-white">
32
</span>
</span>
</NavLink>
</li>
<li className="item group">
<NavLink
to="/message"
src/components/Reminders/MarketHistorySection.jsx
+145
View File
@@ -0,0 +1,145 @@
import React, { useState } from "react";
import MarketHistoryChart from "../Charts/MarketHistoryChart";
import SelectBox from "../Helpers/SelectBox";
export default function MarketHistorySection() {
const filterDatas = ["Last 15 days", "Last 7 days", "Last Month"];
const [currencyDataLvl, setCurrencyDataLvl] = useState([
"Jan 1",
"Jan 2",
"Jan 3",
"Jan 4",
"Jan 5",
"Jan 6",
"Jan 7",
"Jan 8",
"Jan 9",
"Jan 10",
"Jan 11",
"Jan 12",
"Jan 13",
"Jan 14",
"Jan 15",
]);
const [datasetOne, setDatasetOne] = useState([
10, -30, 50, -70, 90, -10, 30, -50, 70, -90, -10, 30, -50, 70, -90,
]);
const [datasetTwo, setDatasetTwo] = useState([
-20, 40, -60, 80, -90, 20, -40, 60, -80, 90, 20, -40, 60, -80, 90,
]);
const currencyStaticsHandler = (value) => {
if (value === "Last Month") {
setCurrencyDataLvl([
"Jan 1",
"Jan 2",
"Jan 3",
"Jan 4",
"Jan 5",
"Jan 6",
"Jan 7",
"Jan 8",
"Jan 9",
"Jan 10",
"Jan 11",
"Jan 12",
"Jan 13",
"Jan 14",
"Jan 15",
"Jan 16",
"Jan 17",
"Jan 18",
"Jan 19",
"Jan 20",
"Jan 21",
"Jan 22",
"Jan 23",
"Jan 24",
"Jan 25",
"Jan 26",
"Jan 27",
"Jan 28",
"Jan 29",
"Jan 30",
]);
setDatasetOne([
10, -30, 50, -70, 90, -10, 30, -50, 70, -90, -10, 30, -50, 70, -90, 66,
10, -30, 50, -70, 90, -10, 30, -50, 70, -90, -10, 30, -50, 70, -90, 60,
]);
setDatasetTwo([
-20, 40, -60, 80, -90, 20, -40, 60, -80, 90, 20, -40, 60, -80, 90, 66,
-20, 40, -60, 80, -90, 20, -40, 60, -80, 90, 20, -40, 60, -80, 90,
]);
} else if (value === "Last 7 days") {
setCurrencyDataLvl([
"Jan 1",
"Jan 2",
"Jan 3",
"Jan 4",
"Jan 5",
"Jan 6",
"Jan 7",
]);
setDatasetOne([10, -30, 50, -70, 90, -10, 30]);
setDatasetTwo([-20, 40, -60, 80, -90, 20, -40]);
} else {
setCurrencyDataLvl([
"Jan 1",
"Jan 2",
"Jan 3",
"Jan 4",
"Jan 5",
"Jan 6",
"Jan 7",
"Jan 8",
"Jan 9",
"Jan 10",
"Jan 11",
"Jan 12",
"Jan 13",
"Jan 14",
"Jan 15",
]);
setDatasetOne([
10, -30, 50, -70, 90, -10, 30, -50, 70, -90, -10, 30, -50, 70, -90,
]);
setDatasetTwo([
-20, 40, -60, 80, -90, 20, -40, 60, -80, 90, 20, -40, 60, -80, 90,
]);
}
};
return (
<div className="market-history-widget w-full mb-11">
<div className="w-full bg-white dark:bg-dark-white rounded-2xl lg:p-7 p-4">
<div className="heading w-full">
<div className="content lg:flex justify-between items-center mb-5">
<div>
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
Market History
</h1>
</div>
<div className="flex space-x-2">
<div className="flex space-x-2 items-center">
<span className="w-4 h-4 bg-purple block rounded-full"></span>
<p className="text-sm text-thin-light-gray font-medium">
Visitors
</p>
</div>
<div className="flex space-x-2 items-center">
<span className="w-4 h-4 bg-pink block rounded-full"></span>
<p className="text-sm text-thin-light-gray font-medium">
Sales
</p>
</div>
</div>
<SelectBox datas={filterDatas} action={currencyStaticsHandler} />
</div>
</div>
<MarketHistoryChart
dataLvl={currencyDataLvl}
datasetOne={datasetOne}
datasetTwo={datasetTwo}
/>
</div>
</div>
);
}
src/components/Reminders/ReminderTable.jsx
+1066
View File
File diff suppressed because it is too large Load Diff
src/components/Reminders/index.jsx
+18
View File
@@ -0,0 +1,18 @@
import React from "react";
import HistoryAnalyticsCard from "../Cards/HistoryAnalyticsCard";
import Layout from "../Partials/Layout";
import ReminderTable from "./ReminderTable";
export default function Reminders() {
return (
<>
<Layout>
<div className="history-wrapper w-full mb-10">
<div className="main-wrapper w-full">
<ReminderTable />
</div>
</div>
</Layout>
</>
);
}
src/components/Tracking/MarketHistorySection.jsx
+145
View File
@@ -0,0 +1,145 @@
import React, { useState } from "react";
import MarketHistoryChart from "../Charts/MarketHistoryChart";
import SelectBox from "../Helpers/SelectBox";
export default function MarketHistorySection() {
const filterDatas = ["Last 15 days", "Last 7 days", "Last Month"];
const [currencyDataLvl, setCurrencyDataLvl] = useState([
"Jan 1",
"Jan 2",
"Jan 3",
"Jan 4",
"Jan 5",
"Jan 6",
"Jan 7",
"Jan 8",
"Jan 9",
"Jan 10",
"Jan 11",
"Jan 12",
"Jan 13",
"Jan 14",
"Jan 15",
]);
const [datasetOne, setDatasetOne] = useState([
10, -30, 50, -70, 90, -10, 30, -50, 70, -90, -10, 30, -50, 70, -90,
]);
const [datasetTwo, setDatasetTwo] = useState([
-20, 40, -60, 80, -90, 20, -40, 60, -80, 90, 20, -40, 60, -80, 90,
]);
const currencyStaticsHandler = (value) => {
if (value === "Last Month") {
setCurrencyDataLvl([
"Jan 1",
"Jan 2",
"Jan 3",
"Jan 4",
"Jan 5",
"Jan 6",
"Jan 7",
"Jan 8",
"Jan 9",
"Jan 10",
"Jan 11",
"Jan 12",
"Jan 13",
"Jan 14",
"Jan 15",
"Jan 16",
"Jan 17",
"Jan 18",
"Jan 19",
"Jan 20",
"Jan 21",
"Jan 22",
"Jan 23",
"Jan 24",
"Jan 25",
"Jan 26",
"Jan 27",
"Jan 28",
"Jan 29",
"Jan 30",
]);
setDatasetOne([
10, -30, 50, -70, 90, -10, 30, -50, 70, -90, -10, 30, -50, 70, -90, 66,
10, -30, 50, -70, 90, -10, 30, -50, 70, -90, -10, 30, -50, 70, -90, 60,
]);
setDatasetTwo([
-20, 40, -60, 80, -90, 20, -40, 60, -80, 90, 20, -40, 60, -80, 90, 66,
-20, 40, -60, 80, -90, 20, -40, 60, -80, 90, 20, -40, 60, -80, 90,
]);
} else if (value === "Last 7 days") {
setCurrencyDataLvl([
"Jan 1",
"Jan 2",
"Jan 3",
"Jan 4",
"Jan 5",
"Jan 6",
"Jan 7",
]);
setDatasetOne([10, -30, 50, -70, 90, -10, 30]);
setDatasetTwo([-20, 40, -60, 80, -90, 20, -40]);
} else {
setCurrencyDataLvl([
"Jan 1",
"Jan 2",
"Jan 3",
"Jan 4",
"Jan 5",
"Jan 6",
"Jan 7",
"Jan 8",
"Jan 9",
"Jan 10",
"Jan 11",
"Jan 12",
"Jan 13",
"Jan 14",
"Jan 15",
]);
setDatasetOne([
10, -30, 50, -70, 90, -10, 30, -50, 70, -90, -10, 30, -50, 70, -90,
]);
setDatasetTwo([
-20, 40, -60, 80, -90, 20, -40, 60, -80, 90, 20, -40, 60, -80, 90,
]);
}
};
return (
<div className="market-history-widget w-full mb-11">
<div className="w-full bg-white dark:bg-dark-white rounded-2xl lg:p-7 p-4">
<div className="heading w-full">
<div className="content lg:flex justify-between items-center mb-5">
<div>
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
Market History
</h1>
</div>
<div className="flex space-x-2">
<div className="flex space-x-2 items-center">
<span className="w-4 h-4 bg-purple block rounded-full"></span>
<p className="text-sm text-thin-light-gray font-medium">
Visitors
</p>
</div>
<div className="flex space-x-2 items-center">
<span className="w-4 h-4 bg-pink block rounded-full"></span>
<p className="text-sm text-thin-light-gray font-medium">
Sales
</p>
</div>
</div>
<SelectBox datas={filterDatas} action={currencyStaticsHandler} />
</div>
</div>
<MarketHistoryChart
dataLvl={currencyDataLvl}
datasetOne={datasetOne}
datasetTwo={datasetTwo}
/>
</div>
</div>
);
}
src/components/Tracking/TrackingTable.jsx
+1066
View File
File diff suppressed because it is too large Load Diff
src/components/Tracking/index.jsx
+20
View File
@@ -0,0 +1,20 @@
import React from "react";
import HistoryAnalyticsCard from "../Cards/HistoryAnalyticsCard";
import SellHistoryMarketVisitorAnalytic from "../Home/SellHistoryMarketVisitorAnalytic";
import Layout from "../Partials/Layout";
import TrackingTable from "./TrackingTable";
import MarketHistorySection from "./MarketHistorySection";
export default function Tracking() {
return (
<>
<Layout>
<div className="history-wrapper w-full mb-10">
<div className="main-wrapper w-full">
<TrackingTable />
</div>
</div>
</Layout>
</>
);
}
src/views/RemindersPage.jsx
+10
View File
@@ -0,0 +1,10 @@
import React from "react";
import Reminders from "../components/Reminders";
export default function RemindersPage() {
return (
<>
<Reminders />
</>
);
}
src/views/TrackingPage.jsx
+10
View File
@@ -0,0 +1,10 @@
import React from "react";
import Tracking from "../components/Tracking";
export default function TrackingPage() {
return (
<>
<Tracking />
</>
);
}