From 1dad00a1c8c8d8249296b3b3aa930d9c9292a5ad Mon Sep 17 00:00:00 2001 From: Scott Cathcart Date: Sun, 17 Nov 2024 14:32:51 -0500 Subject: [PATCH] add routes, update css, initial navbar --- package-lock.json | 45 ++++++++++++++++++++++++++++++++++++++++++--- package.json | 11 ++++++----- src/About.jsx | 15 +++++++++++++++ src/App.css | 11 +++++++++-- src/App.jsx | 25 +++++++++++-------------- src/Contact.jsx | 15 +++++++++++++++ src/Home.jsx | 22 ++++++++++++++++++++++ src/Navbar.jsx | 21 +++++++++++++++++++++ src/index.css | 2 +- src/main.jsx | 5 ++++- 10 files changed, 146 insertions(+), 26 deletions(-) create mode 100644 src/About.jsx create mode 100644 src/Contact.jsx create mode 100644 src/Home.jsx create mode 100644 src/Navbar.jsx diff --git a/package-lock.json b/package-lock.json index c4c81b7..4a9c066 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,11 +5,12 @@ "requires": true, "packages": { "": { - "name": "chatgpt-openshift", - "version": "0.0.0", + "name": "react-openshift", + "version": "0.0.1", "dependencies": { "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "react-router-dom": "^6.28.0" }, "devDependencies": { "@eslint/js": "^9.11.1", @@ -916,6 +917,14 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@remix-run/router": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz", + "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.24.0", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz", @@ -3384,6 +3393,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz", + "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==", + "dependencies": { + "@remix-run/router": "1.21.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz", + "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==", + "dependencies": { + "@remix-run/router": "1.21.0", + "react-router": "6.28.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz", diff --git a/package.json b/package.json index 1841dfb..8a7c37b 100644 --- a/package.json +++ b/package.json @@ -11,13 +11,14 @@ }, "dependencies": { "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "react-router-dom": "^6.28.0" }, "devDependencies": { - "@eslint/js": "^9.11.1", - "@types/react": "^18.3.10", - "@types/react-dom": "^18.3.0", - "@vitejs/plugin-react": "^4.3.2", + "@eslint/js": "^9.15.0", + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", + "@vitejs/plugin-react": "^4.3.3", "eslint": "^9.11.1", "eslint-plugin-react": "^7.37.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0", diff --git a/src/About.jsx b/src/About.jsx new file mode 100644 index 0000000..6e314c0 --- /dev/null +++ b/src/About.jsx @@ -0,0 +1,15 @@ +function About() { + + return ( + <> +
+

About

+
+

Welcome to the about page...

+
+
+ + ) +} + +export default About diff --git a/src/App.css b/src/App.css index c65ebf8..18c6564 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5 +1,5 @@ body { - background-color: green; + background-color: #222; } #root { @@ -15,9 +15,11 @@ body { will-change: filter; transition: filter 300ms; } + .logo:hover { filter: drop-shadow(0 0 2em #000e2f55); } + @keyframes logo-spin { from { transform: rotate(0deg); @@ -28,7 +30,7 @@ body { } @media (prefers-reduced-motion: no-preference) { - a .logo { + .logo { animation: logo-spin infinite 60s linear; } } @@ -40,3 +42,8 @@ body { .read-the-docs { color: #888; } + +Nav li { + display: inline; + margin: 0 1em; +} diff --git a/src/App.jsx b/src/App.jsx index 585772f..073a429 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,23 +1,20 @@ -import { useState } from 'react' -import uconnOakLogo from './assets/oak-leaf-blue.png' +import { Route, Routes } from 'react-router-dom'; import './App.css' +import Navbar from './Navbar' +import Home from './Home' +import About from './About' +import Contact from './Contact' function App() { - const [count, setCount] = useState(0) return ( <> -
- - UConn Oak Logo - -
-

Hello!

-
- -
+ + + } /> + } /> + } /> + ) } diff --git a/src/Contact.jsx b/src/Contact.jsx new file mode 100644 index 0000000..3ff7e18 --- /dev/null +++ b/src/Contact.jsx @@ -0,0 +1,15 @@ +function Contact() { + + return ( + <> +
+

Contact

+
+

Contact us...

+
+
+ + ) +} + +export default Contact diff --git a/src/Home.jsx b/src/Home.jsx new file mode 100644 index 0000000..0072f34 --- /dev/null +++ b/src/Home.jsx @@ -0,0 +1,22 @@ +import { useState } from 'react' +import uconnOakLogo from './assets/oak-leaf-blue.png' + +function App() { + const [count, setCount] = useState(0) + + return ( + <> +
+ UConn Oak Logo +
+

Hello!

+
+ +
+ + ) +} + +export default App diff --git a/src/Navbar.jsx b/src/Navbar.jsx new file mode 100644 index 0000000..ccd82b6 --- /dev/null +++ b/src/Navbar.jsx @@ -0,0 +1,21 @@ +import { Link } from "react-router-dom"; + +const Navbar = () => { + return ( + + ); +} + +export default Navbar diff --git a/src/index.css b/src/index.css index d6b7d68..4db05ba 100644 --- a/src/index.css +++ b/src/index.css @@ -25,7 +25,7 @@ a:hover { body { margin: 0; display: flex; - place-items: center; + place-items: top; min-width: 320px; min-height: 100vh; } diff --git a/src/main.jsx b/src/main.jsx index 89f91e5..d5ce027 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,13 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' +import { BrowserRouter } from 'react-router-dom' import App from './App.jsx' import './index.css' createRoot(document.getElementById('root')).render( - + + + , )