diff --git a/client/src/components/ui/button_go_user_page.tsx b/client/src/components/ui/button_go_user_profile_page.tsx similarity index 74% rename from client/src/components/ui/button_go_user_page.tsx rename to client/src/components/ui/button_go_user_profile_page.tsx index e6db5c8..fb1f622 100644 --- a/client/src/components/ui/button_go_user_page.tsx +++ b/client/src/components/ui/button_go_user_profile_page.tsx @@ -1,8 +1,8 @@ import Link from "next/link"; -export default function ButtonGoUserPage() { +export default function ButtonGoUserProfilePage() { return ( - + ); diff --git a/client/src/components/ui/user_navbar.tsx b/client/src/components/ui/user_navbar.tsx new file mode 100644 index 0000000..bc1deeb --- /dev/null +++ b/client/src/components/ui/user_navbar.tsx @@ -0,0 +1,60 @@ +import Link from "next/link"; + +export default function User_Navbar() { + return ( + + ); +} diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx index 3437499..9b01b3e 100644 --- a/client/src/pages/index.tsx +++ b/client/src/pages/index.tsx @@ -1,9 +1,9 @@ // this is the path to this page // src/pages/index.tsx -import ButtonGoUserDashboard from "../components/ui/button_go_user_dashboard"; import ButtonGoOrganizationDashboard from "../components/ui/button_go_organization_dashboard"; -import ButtonGoUserPage from "../components/ui/button_go_user_page"; +import ButtonGoUserDashboard from "../components/ui/button_go_user_dashboard"; +import ButtonGoUserProfilePage from "../components/ui/button_go_user_profile_page"; // this is a react functional component // it returns a html element that will render the jsx inside it @@ -29,7 +29,7 @@ const LandingPage = () => { - + ); }; diff --git a/client/src/pages/user_page.tsx b/client/src/pages/user_page.tsx deleted file mode 100644 index adbb8a6..0000000 --- a/client/src/pages/user_page.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import Head from "next/head"; - -const DashboardPage = () => { - return ( - <> - - User Page - -
-
-

Welcome to the Users Page!

{" "} -
-
- - ); -}; - -export default DashboardPage; diff --git a/client/src/pages/user_profile_page.tsx b/client/src/pages/user_profile_page.tsx new file mode 100644 index 0000000..8cf0c6f --- /dev/null +++ b/client/src/pages/user_profile_page.tsx @@ -0,0 +1,89 @@ +import Head from "next/head"; + +import User_Navbar from "../components/ui/user_navbar"; + +export default function UserPage() { + return ( + <> + + User Profile Page + + + {/* Navbar refactor */} + + +
+ {/* Profile card */} +
+ {/* Avatar */} +
+ U +
+ + {/* User details */} +

+ New User 12345678 +

+

+ Perth, Western Australia +

+ + {/* Stats */} +
+ + + + +
+
+
+ + ); +} + +function Stat({ label, value }: { label: string; value: number }) { + return ( +
+
{value}
+
{label}
+
+ ); +}