From 81b2f439cec51fee54d9c95ef1e6102a106f501f Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Sat, 16 Mar 2024 17:47:17 +0100 Subject: [PATCH] added some component to dashboard home page --- src/assets/images/dashboard/card_bg.png | Bin 0 -> 6878 bytes src/components/Cards/DefaultCard.tsx | 42 +++++++++++++ src/components/Cards/index.tsx | 3 + src/components/Dashboard/DashboardHome.tsx | 58 ++++++++++++++++++ src/components/Dashboard/index.tsx | 3 + src/components/DashboardLayout/Aside.tsx | 2 +- .../DashboardLayout/DashboardLayout.tsx | 2 +- src/components/Icons/Icons.tsx | 8 +++ src/components/index.ts | 2 + src/pages/DashboardHome.tsx | 5 -- src/pages/DashboardHomePage.tsx | 9 +++ ...oardLegals.tsx => DashboardLegalsPage.tsx} | 2 +- ...Payments.tsx => DashboardPaymentsPage.tsx} | 2 +- ...rdProfile.tsx => DashboardProfilePage.tsx} | 2 +- ...tion.tsx => DashboardVerificationPage.tsx} | 2 +- src/pages/index.ts | 12 ++-- src/router/Router.tsx | 12 ++-- 17 files changed, 143 insertions(+), 23 deletions(-) create mode 100644 src/assets/images/dashboard/card_bg.png create mode 100644 src/components/Cards/DefaultCard.tsx create mode 100644 src/components/Cards/index.tsx create mode 100644 src/components/Dashboard/DashboardHome.tsx create mode 100644 src/components/Dashboard/index.tsx delete mode 100644 src/pages/DashboardHome.tsx create mode 100644 src/pages/DashboardHomePage.tsx rename src/pages/{DashboardLegals.tsx => DashboardLegalsPage.tsx} (50%) rename src/pages/{DashboardPayments.tsx => DashboardPaymentsPage.tsx} (50%) rename src/pages/{DashboardProfile.tsx => DashboardProfilePage.tsx} (50%) rename src/pages/{DashboardVerification.tsx => DashboardVerificationPage.tsx} (50%) diff --git a/src/assets/images/dashboard/card_bg.png b/src/assets/images/dashboard/card_bg.png new file mode 100644 index 0000000000000000000000000000000000000000..1b5e4e7b1cd9bb06f76dbf32fa27c6e3048e2ad1 GIT binary patch literal 6878 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 V|8aoFalfPRG*n-z)F|16{vV`&c1{2Q literal 0 HcmV?d00001 diff --git a/src/components/Cards/DefaultCard.tsx b/src/components/Cards/DefaultCard.tsx new file mode 100644 index 0000000..041c3bb --- /dev/null +++ b/src/components/Cards/DefaultCard.tsx @@ -0,0 +1,42 @@ +import { Icons } from "../" + +type Props = { + title?: string, + descText?: string, + iconName?: string, + iconColor?: string, + cardClass?: string, + titleClass?: string, + descTextClass?: string, + onClick?: ()=>any +} + + +export default function DefaultCard({ +title, +descText, +iconName, +iconColor, +cardClass, +titleClass, +descTextClass, +onClick +}:Props) { + return ( + + ) +} diff --git a/src/components/Cards/index.tsx b/src/components/Cards/index.tsx new file mode 100644 index 0000000..2614703 --- /dev/null +++ b/src/components/Cards/index.tsx @@ -0,0 +1,3 @@ +import DefaultCard from "./DefaultCard"; + +export { DefaultCard }; \ No newline at end of file diff --git a/src/components/Dashboard/DashboardHome.tsx b/src/components/Dashboard/DashboardHome.tsx new file mode 100644 index 0000000..01c95fc --- /dev/null +++ b/src/components/Dashboard/DashboardHome.tsx @@ -0,0 +1,58 @@ +import { DefaultCard } from "../" + +export default function DashboardHome() { + return ( +
+
+ {console.log('working')}} + /> +
+ +
+ {/* cards display */} +
+ {console.log('working')}} + /> +
+
+ {console.log('working')}} + /> +
+
+ {console.log('working')}} + /> +
+
+
+ ) +} diff --git a/src/components/Dashboard/index.tsx b/src/components/Dashboard/index.tsx new file mode 100644 index 0000000..1525f00 --- /dev/null +++ b/src/components/Dashboard/index.tsx @@ -0,0 +1,3 @@ +import DashboardHome from './DashboardHome' + +export { DashboardHome }; \ No newline at end of file diff --git a/src/components/DashboardLayout/Aside.tsx b/src/components/DashboardLayout/Aside.tsx index 35f5d55..2e833e4 100644 --- a/src/components/DashboardLayout/Aside.tsx +++ b/src/components/DashboardLayout/Aside.tsx @@ -28,7 +28,7 @@ export default function Aside() { ))}
-
diff --git a/src/components/DashboardLayout/DashboardLayout.tsx b/src/components/DashboardLayout/DashboardLayout.tsx index 0300d08..f73bac0 100644 --- a/src/components/DashboardLayout/DashboardLayout.tsx +++ b/src/components/DashboardLayout/DashboardLayout.tsx @@ -34,7 +34,7 @@ export default function DashboardLayout({children}:{children: ReactNode}) {
-
+
{/*
diff --git a/src/components/Icons/Icons.tsx b/src/components/Icons/Icons.tsx index b86a47e..2f2ef3a 100644 --- a/src/components/Icons/Icons.tsx +++ b/src/components/Icons/Icons.tsx @@ -28,6 +28,14 @@ export default function Icons({name, fillColor}:Props) { + :name == 'arrow'? + + + + :name == 'greater-than'? + + + : null } diff --git a/src/components/index.ts b/src/components/index.ts index f4d027e..c5a1cd8 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -5,3 +5,5 @@ export * from "./shared"; export * from "./Footer"; export * from "./DashboardLayout"; export * from "./Icons"; +export * from './Dashboard' +export * from './Cards' diff --git a/src/pages/DashboardHome.tsx b/src/pages/DashboardHome.tsx deleted file mode 100644 index d12cb4b..0000000 --- a/src/pages/DashboardHome.tsx +++ /dev/null @@ -1,5 +0,0 @@ -export default function DashboardHome() { - return ( -
DashboardHome
- ) -} diff --git a/src/pages/DashboardHomePage.tsx b/src/pages/DashboardHomePage.tsx new file mode 100644 index 0000000..7b02b80 --- /dev/null +++ b/src/pages/DashboardHomePage.tsx @@ -0,0 +1,9 @@ +import { DashboardHome } from "../components" + +export default function DashboardHomePage() { + return ( +
+ +
+ ) +} diff --git a/src/pages/DashboardLegals.tsx b/src/pages/DashboardLegalsPage.tsx similarity index 50% rename from src/pages/DashboardLegals.tsx rename to src/pages/DashboardLegalsPage.tsx index b3a33c8..5101c4f 100644 --- a/src/pages/DashboardLegals.tsx +++ b/src/pages/DashboardLegalsPage.tsx @@ -1,4 +1,4 @@ -export default function DashboardLegals() { +export default function DashboardLegalsPage() { return (
DashboardLegals
) diff --git a/src/pages/DashboardPayments.tsx b/src/pages/DashboardPaymentsPage.tsx similarity index 50% rename from src/pages/DashboardPayments.tsx rename to src/pages/DashboardPaymentsPage.tsx index 2a345c3..52e80af 100644 --- a/src/pages/DashboardPayments.tsx +++ b/src/pages/DashboardPaymentsPage.tsx @@ -1,4 +1,4 @@ -export default function Dashboardpayments() { +export default function DashboardpaymentsPage() { return (
Dashboardpayments
) diff --git a/src/pages/DashboardProfile.tsx b/src/pages/DashboardProfilePage.tsx similarity index 50% rename from src/pages/DashboardProfile.tsx rename to src/pages/DashboardProfilePage.tsx index 06e19b2..cf2ae24 100644 --- a/src/pages/DashboardProfile.tsx +++ b/src/pages/DashboardProfilePage.tsx @@ -1,4 +1,4 @@ -export default function DashboardProfile() { +export default function DashboardProfilePage() { return (
DashboardProfile
) diff --git a/src/pages/DashboardVerification.tsx b/src/pages/DashboardVerificationPage.tsx similarity index 50% rename from src/pages/DashboardVerification.tsx rename to src/pages/DashboardVerificationPage.tsx index a5f5c55..65b9262 100644 --- a/src/pages/DashboardVerification.tsx +++ b/src/pages/DashboardVerificationPage.tsx @@ -1,4 +1,4 @@ -export default function DashboardVerification() { +export default function DashboardVerificationPage() { return (
DashboardVerification
) diff --git a/src/pages/index.ts b/src/pages/index.ts index 512317e..0c85569 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -1,10 +1,10 @@ import HomePage from "./HomePage"; import LoginPage from "./LoginPage"; import GetStartedPage from "./GetStartedPage"; -import DashboardHome from "./DashboardHome"; -import DashboardLegals from "./DashboardLegals"; -import DashboardProfile from "./DashboardProfile"; -import DashboardVerification from "./DashboardVerification"; -import Dashboardpayments from "./DashboardPayments"; +import DashboardHomePage from "./DashboardHomePage"; +import DashboardLegalsPage from "./DashboardLegalsPage"; +import DashboardProfilePage from "./DashboardProfilePage"; +import DashboardVerificationPage from "./DashboardVerificationPage"; +import DashboardpaymentsPage from "./DashboardPaymentsPage"; -export {HomePage, LoginPage, GetStartedPage, DashboardHome, DashboardLegals, DashboardProfile, DashboardVerification, Dashboardpayments} \ No newline at end of file +export {HomePage, LoginPage, GetStartedPage, DashboardHomePage, DashboardLegalsPage, DashboardProfilePage, DashboardVerificationPage, DashboardpaymentsPage} \ No newline at end of file diff --git a/src/router/Router.tsx b/src/router/Router.tsx index f6c977b..3cbe20f 100644 --- a/src/router/Router.tsx +++ b/src/router/Router.tsx @@ -1,6 +1,6 @@ import { Route, Routes } from "react-router-dom"; import { RouteHandler } from "./routes"; -import { GetStartedPage, HomePage, LoginPage, DashboardHome, DashboardLegals, DashboardProfile, DashboardVerification, Dashboardpayments } from "../pages"; +import { GetStartedPage, HomePage, LoginPage, DashboardHomePage, DashboardLegalsPage, DashboardProfilePage, DashboardVerificationPage, DashboardpaymentsPage } from "../pages"; import { DashboardAuth } from "../components"; const Routers = () => { @@ -10,11 +10,11 @@ const Routers = () => { } /> } /> }> - } /> - } /> - } /> - } /> - } /> + } /> + } /> + } /> + } /> + } /> Error Page} /> -- 2.34.1