diff --git a/src/assets/index.js b/src/assets/index.js new file mode 100644 index 0000000..cae8528 --- /dev/null +++ b/src/assets/index.js @@ -0,0 +1,10 @@ +// assets/index.js +const images = {}; + +function importAll(r) { + r.keys().forEach((key) => (images[key.replace("./", "")] = r(key))); +} + +importAll(require.context("./", false, /\.(png|jpe?g|svg)$/)); + +export default images; diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..7940fea --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,26 @@ +import React from "react"; +import background from "../assets/hawaii_resting.jpg"; +import Navbar from "../components/Navbar"; + +function Header({ title, subTitle }) { + return ( +
+
+ +
+
+

{title}

+ {subTitle &&

{subTitle}

} +
+
+ ); +}; + +export default Header; diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 0e2183b..7870d81 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -1,8 +1,19 @@ import React from 'react'; -import { Link } from 'react-router-dom'; +import { NavLink } from 'react-router-dom'; import logo from '../assets/logo.png'; +const NavItem = ({ to, label }) => { + return ( + + {label} + + ); +}; + function Navbar() { return ( ); diff --git a/src/index.js b/src/index.js index 003e4a5..54baa85 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,8 @@ import React from 'react'; import { createHashRouter, createBrowserRouter, - RouterProvider + RouterProvider, + Link } from 'react-router-dom'; import { createRoot } from "react-dom/client"; @@ -11,8 +12,9 @@ import ErrorPage from './pages/NotFound'; import TeamPage from './pages/Team'; import VehiclePage from './pages/Vehicle'; import SponsorsPage from './pages/Sponsors'; -// import PhotosPage from './pages/Photos'; -// import NotFoundPage from './pages/NotFound'; +import PhotosPage from './pages/Photos'; + +import Navbar from "./components/Navbar.js"; const router = createBrowserRouter([ { @@ -32,15 +34,13 @@ const router = createBrowserRouter([ path: "/sponsors", element: , }, - // { - // path: "/photos", - // element: , - // }, + { + path: "/photos", + element: , + }, ], { }); -console.log("test"); - createRoot(document.getElementById("root")).render( ); diff --git a/src/pages/Landing.js b/src/pages/Landing.js index a9943b5..3de53fc 100644 --- a/src/pages/Landing.js +++ b/src/pages/Landing.js @@ -7,7 +7,9 @@ import teamPhoto from '../assets/robotx_2022_team_1.jpg'; function Header() { return (
- +
+ +

NaviGator

UF's Autonomous Maritime System

@@ -17,6 +19,7 @@ function Header() { ); } +// Mission Component function Mission() { return (
@@ -56,6 +59,7 @@ function Mission() { ); } +// About Component function About() { return (
diff --git a/src/pages/Photos.js b/src/pages/Photos.js new file mode 100644 index 0000000..e092cab --- /dev/null +++ b/src/pages/Photos.js @@ -0,0 +1,89 @@ +import React, {useState} from "react"; +import Header from "../components/Header"; + +import assets from "../assets"; + +const ImageSection = () => { + return ( +
+
+ teams +
+
+ ); +}; + +const ImageGrid = ({ openModal }) => { + const images = [ + { src: 'boat.jpg', alt: 'Boat at Sea' }, + { src: 'navigator.jpg', alt: 'Boat Preparing' }, + { src: 'navigatorams.jpg', alt: 'Testing Equipment' }, + { src: 'person.jpg', alt: 'Teamwork' }, + { src: 'hawaii_stc.jpg', alt: 'Teamwork' }, + { src: 'hawaii_dock.jpg', alt: 'Teamwork' }, + { src: 'boat_at_alumni_event-min.jpg', alt: 'Teamwork' }, + { src: 'dec_2015_trial.jpg', alt: 'Teamwork' }, + ]; + + return ( +
+ {images.map((image, index) => ( +
+ {image.alt} openModal(assets[image.src])} + /> +
+ ))} +
+ ); +}; + + +const Modal = ({ modalSrc, isVisible, closeModal }) => { + return ( + + ); +}; + +const PhotosPage = () => { + // This function shows hidden lines + const [modalSrc, setModalSrc] = useState(''); + const [isModalVisible, setIsModalVisible] = useState(false); + + // Open the modal and set the image source + const openModal = (src) => { + setModalSrc(src); + setIsModalVisible(true); + }; + + // Close the modal + const closeModal = () => { + setIsModalVisible(false); + }; + + return ( +
+
+
+
+
+ + + +
+
+ ); +}; + +export default PhotosPage; diff --git a/src/pages/Sponsors.js b/src/pages/Sponsors.js index 979c59c..d99e014 100644 --- a/src/pages/Sponsors.js +++ b/src/pages/Sponsors.js @@ -1,25 +1,5 @@ import React from "react"; -import Navbar from "../components/Navbar"; - -import background from "../assets/hawaii_resting.jpg"; - -function Header() { - return ( -
- -
-

Sponsors

-
-
- ); -} +import Header from "../components/Header"; const SponsorSection = ({ title, sponsors, bgColor }) => { return ( @@ -220,7 +200,7 @@ const SponsorsPage = () => { return (
-
+
- -
-

Meet the Team

-

2024 Season

-
-
- ); -} - const Leadership = () => { const members = [ { image: memberImages["cameron.jpeg"], name: 'Cameron Brown', role: 'Team Lead' }, @@ -86,7 +64,7 @@ const TeamPage = () => { return (
-
+
diff --git a/src/pages/Vehicle.js b/src/pages/Vehicle.js index 4d7ecda..a772397 100644 --- a/src/pages/Vehicle.js +++ b/src/pages/Vehicle.js @@ -1,9 +1,8 @@ import React from "react"; -import Navbar from "../components/Navbar"; +import Header from "../components/Header"; import MemberCard from "../components/MemberCard"; -import background from "../assets/hawaii_resting.jpg"; import cropped from "../assets/navigator_cropped_2024.png"; import settingsLogo from "../assets/settings.png"; @@ -13,24 +12,6 @@ import circuitLogo from "../assets/circuit.png"; import vrx2023 from "../assets/vrx-2023.jpg"; import testingVan from "../assets/testing_fbi_van.jpg"; -function Header() { - return ( -
- -
-

Our Design

-
-
- ); -}; - const NaviGatorHeader = () => { return (
@@ -379,7 +360,7 @@ const VehiclePage = () => { return (
-
+