From 039005482e5ef91cc1bfbea7757fea1c036bbc0f Mon Sep 17 00:00:00 2001 From: Yousef-Taha1 <166398882+Yousef-Taha1@users.noreply.github.com> Date: Mon, 10 Jun 2024 17:00:50 +0200 Subject: [PATCH] Frontend navbar finished maybe? (#111) --- frontend/package-lock.json | 42 ++++++++ frontend/package.json | 1 + frontend/src/App.tsx | 26 +---- frontend/src/Components/Friends.tsx | 10 ++ frontend/src/Components/Inventory.tsx | 10 ++ frontend/src/Components/Navbar/Navbar.tsx | 106 ++++++++++--------- frontend/src/Components/PetPage.tsx | 10 ++ node/code/modules/display_handler/forg (1).c | 0 8 files changed, 134 insertions(+), 71 deletions(-) create mode 100644 frontend/src/Components/Friends.tsx create mode 100644 frontend/src/Components/Inventory.tsx create mode 100644 frontend/src/Components/PetPage.tsx create mode 100644 node/code/modules/display_handler/forg (1).c diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 37043ea0..3db573d5 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -14,6 +14,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-oidc-context": "^3.1.0", + "react-router-dom": "^6.23.1", "reactjs-popup": "^2.0.6" }, "devDependencies": { @@ -690,6 +691,15 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@remix-run/router": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz", + "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.17.2", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz", @@ -3037,6 +3047,38 @@ "react": ">=16.8.0" } }, + "node_modules/react-router": { + "version": "6.23.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz", + "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.16.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.23.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz", + "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.16.1", + "react-router": "6.23.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/reactjs-popup": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.6.tgz", diff --git a/frontend/package.json b/frontend/package.json index 077b8d9b..e1580ba2 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,6 +16,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-oidc-context": "^3.1.0", + "react-router-dom": "^6.23.1", "reactjs-popup": "^2.0.6" }, "devDependencies": { diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index d855b45e..13b9bdbd 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -29,9 +29,11 @@ function App() { if (auth.isAuthenticated) { return ( +
+{/*

WELCOME TO TEAMAGOCHI GANG

CARTI @@ -41,28 +43,10 @@ function App() { Logo Logo Logo - Logo - Logo - Logo - Logo - Logo - Logo - Logo - - - - -

-
- - + Logo */}
-

- Hello -

-
Hello {auth.user?.profile.sub}
+ +
Hello {auth.user?.profile?.preferred_username || 'User'}
); } diff --git a/frontend/src/Components/Friends.tsx b/frontend/src/Components/Friends.tsx new file mode 100644 index 00000000..3921a4bb --- /dev/null +++ b/frontend/src/Components/Friends.tsx @@ -0,0 +1,10 @@ +import React from 'react'; + +const Friends = () => ( +
+

Friends Page

+

Welcome to the Friends Page!

+
+); + +export default Friends; diff --git a/frontend/src/Components/Inventory.tsx b/frontend/src/Components/Inventory.tsx new file mode 100644 index 00000000..2f2d6c80 --- /dev/null +++ b/frontend/src/Components/Inventory.tsx @@ -0,0 +1,10 @@ +import React from 'react'; + +const Inventory = () => ( +
+

Inventory Page

+

Welcome to the Inventory Page!

+
+); + +export default Inventory; diff --git a/frontend/src/Components/Navbar/Navbar.tsx b/frontend/src/Components/Navbar/Navbar.tsx index bcd5e408..db50da75 100644 --- a/frontend/src/Components/Navbar/Navbar.tsx +++ b/frontend/src/Components/Navbar/Navbar.tsx @@ -1,20 +1,24 @@ import React, { useState } from "react"; +import {BrowserRouter as Router, Link, Route, Routes} from "react-router-dom"; +import Inventory from '../Inventory.tsx'; +import Settings from '../Settings.tsx'; +import Friends from '../Friends.tsx'; +import PetPage from '../PetPage.tsx'; import { useAuth } from "react-oidc-context"; import './navbar.css'; -const Navbar = () =>{ +const Navbar = () => { const auth = useAuth(); const [activePage, setActivePage] = useState("Pet Page"); const loginButtonStyles = { - color: '#fff', // White text color - backgroundColor: '#006400', - fontWeight: 'bold', // Bold font weight - // Add any other custom styles as needed + color: '#fff', + backgroundColor: '#006400', + fontWeight: 'bold', }; const navbarItemStyles = { - marginRight: '20px', // Adjust the margin between navbar items + marginRight: '20px', }; const handlePageClick = (page) => { @@ -22,54 +26,56 @@ const Navbar = () =>{ }; return ( -
- + + } /> + } /> + } /> + } /> + +
) } +<<<<<<< HEAD +export default Navbar; +======= export default Navbar +>>>>>>> d84ce58873962e255ae93e1ec5fcd937a2e765f9 diff --git a/frontend/src/Components/PetPage.tsx b/frontend/src/Components/PetPage.tsx new file mode 100644 index 00000000..df5f7899 --- /dev/null +++ b/frontend/src/Components/PetPage.tsx @@ -0,0 +1,10 @@ +import React from 'react'; + +const PetPage = () => ( +
+

Pet Page

+

Welcome to the Pet Page!

+
+); + +export default PetPage; diff --git a/node/code/modules/display_handler/forg (1).c b/node/code/modules/display_handler/forg (1).c new file mode 100644 index 00000000..e69de29b