From a89e901298295ade3aceb23d8e67206b66ac3076 Mon Sep 17 00:00:00 2001 From: lachlanshoesmith <12870244+lachlanshoesmith@users.noreply.github.com> Date: Tue, 3 Dec 2024 12:58:28 +1100 Subject: [PATCH 1/7] =?UTF-8?q?=F0=9F=8F=B9=20add=20basic=20routes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package.json | 3 +- frontend/pnpm-lock.yaml | 44 ++++++++++++++++++++++++++++++ frontend/src/App.css | 12 +++++++- frontend/src/App.tsx | 9 ++++-- frontend/src/HomePage/HomePage.tsx | 3 ++ frontend/src/NavBar/NavBar.tsx | 17 ++++++------ frontend/src/index.css | 3 -- frontend/src/main.tsx | 18 ++++++------ 8 files changed, 86 insertions(+), 23 deletions(-) create mode 100644 frontend/src/HomePage/HomePage.tsx delete mode 100644 frontend/src/index.css diff --git a/frontend/package.json b/frontend/package.json index a7ab233..b2deb0a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,7 +12,8 @@ "dependencies": { "@heroicons/react": "^2.1.5", "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "react-router": "^7.0.1" }, "devDependencies": { "@eslint/js": "^9.11.1", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 841185f..4fba5df 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) + react-router: + specifier: ^7.0.1 + version: 7.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: '@eslint/js': specifier: ^9.11.1 @@ -460,6 +463,9 @@ packages: '@types/babel__traverse@7.20.6': resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==} + '@types/cookie@0.6.0': + resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==} + '@types/estree@1.0.6': resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==} @@ -614,6 +620,10 @@ packages: convert-source-map@2.0.0: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} + cookie@1.0.2: + resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==} + engines: {node: '>=18'} + cross-spawn@7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} @@ -939,6 +949,16 @@ packages: resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==} engines: {node: '>=0.10.0'} + react-router@7.0.1: + resolution: {integrity: sha512-WVAhv9oWCNsja5AkK6KLpXJDSJCQizOIyOd4vvB/+eHGbYx5vkhcmcmwWjQ9yqkRClogi+xjEg9fNEOd5EX/tw==} + engines: {node: '>=20.0.0'} + peerDependencies: + react: '>=18' + react-dom: '>=18' + peerDependenciesMeta: + react-dom: + optional: true + react@18.3.1: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} @@ -971,6 +991,9 @@ packages: engines: {node: '>=10'} hasBin: true + set-cookie-parser@2.7.1: + resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==} + shebang-command@2.0.0: resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} engines: {node: '>=8'} @@ -1012,6 +1035,9 @@ packages: peerDependencies: typescript: '>=4.2.0' + turbo-stream@2.4.0: + resolution: {integrity: sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==} + type-check@0.4.0: resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} engines: {node: '>= 0.8.0'} @@ -1438,6 +1464,8 @@ snapshots: dependencies: '@babel/types': 7.25.8 + '@types/cookie@0.6.0': {} + '@types/estree@1.0.6': {} '@types/json-schema@7.0.15': {} @@ -1621,6 +1649,8 @@ snapshots: convert-source-map@2.0.0: {} + cookie@1.0.2: {} + cross-spawn@7.0.3: dependencies: path-key: 3.1.1 @@ -1937,6 +1967,16 @@ snapshots: react-refresh@0.14.2: {} + react-router@7.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@types/cookie': 0.6.0 + cookie: 1.0.2 + react: 18.3.1 + set-cookie-parser: 2.7.1 + turbo-stream: 2.4.0 + optionalDependencies: + react-dom: 18.3.1(react@18.3.1) + react@18.3.1: dependencies: loose-envify: 1.4.0 @@ -1979,6 +2019,8 @@ snapshots: semver@7.6.3: {} + set-cookie-parser@2.7.1: {} + shebang-command@2.0.0: dependencies: shebang-regex: 3.0.0 @@ -2009,6 +2051,8 @@ snapshots: dependencies: typescript: 5.6.3 + turbo-stream@2.4.0: {} + type-check@0.4.0: dependencies: prelude-ls: 1.2.1 diff --git a/frontend/src/App.css b/frontend/src/App.css index c87ad97..cc44122 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,7 +1,17 @@ html { - font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } .event { color: green; } + +html, +body { + margin: 0; +} + +* { + box-sizing: border-box; +} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 0fa3b54..0e7c2f4 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -4,11 +4,13 @@ import { Keyword, KeywordOptions } from "./Keyword/Keyword"; import bbq from "./assets/bbq.png"; import NavBar from "./NavBar/NavBar"; import Button, { ButtonOptions } from "./Button/Button"; +import { BrowserRouter, Route, Routes } from "react-router"; +import HomePage from "./HomePage/HomePage"; function App() { return ( <> -

Hi

+ {/*

Hi

Frunk Dwindleward - + */} + + } /> + ); diff --git a/frontend/src/HomePage/HomePage.tsx b/frontend/src/HomePage/HomePage.tsx new file mode 100644 index 0000000..a240293 --- /dev/null +++ b/frontend/src/HomePage/HomePage.tsx @@ -0,0 +1,3 @@ +export default function HomePage() { + return

Hi

; +} diff --git a/frontend/src/NavBar/NavBar.tsx b/frontend/src/NavBar/NavBar.tsx index 4c518fc..cb356b5 100644 --- a/frontend/src/NavBar/NavBar.tsx +++ b/frontend/src/NavBar/NavBar.tsx @@ -1,23 +1,24 @@ -import classes from './NavBar.module.css'; -import pyramidIcon from '../assets/pyramidIcon.svg'; +import classes from "./NavBar.module.css"; +import pyramidIcon from "../assets/pyramidIcon.svg"; +import { NavLink } from "react-router"; export type NavBarProps = { profileImage: string; -} +}; function NavBar(props: NavBarProps) { return (