diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/App.js | 6 | ||||
-rw-r--r-- | src/components/Navbar.js | 2 | ||||
-rw-r--r-- | src/layouts/GridLayout.js | 68 | ||||
-rw-r--r-- | src/pages/FindOpportunities.js | 71 | ||||
-rw-r--r-- | src/pages/Messages.js | 23 | ||||
-rw-r--r-- | src/pages/RecruitVolunteers.js | 23 |
6 files changed, 180 insertions, 13 deletions
@@ -16,6 +16,9 @@ import PrivacyPolicy from "./pages/PrivacyPolicy"; import Dashboard from "./pages/Dashboard"; import {AuthProvider} from "./providers/AuthContext"; import Profile from "./pages/Profile"; +import FindOpportunities from "./pages/FindOpportunities"; +import RecruitVolunteers from "./pages/RecruitVolunteers"; +import Messages from "./pages/Messages"; function App() { const location = useLocation(); @@ -36,6 +39,9 @@ function App() { <Route path="/login" element={<Login />} /> <Route path="/dashboard" element={<Dashboard />} /> <Route path="/profile" element={<Profile />} /> + <Route path="/find-opportunities" element={<FindOpportunities />} /> + <Route path="/recruit-volunteers" element={<RecruitVolunteers />} /> + <Route path="/messages" element={<Messages />} /> <Route path="/forgot-password" element={<ForgotPassword />} /> <Route path="/sign-up" element={<SignUp />} /> </Routes> diff --git a/src/components/Navbar.js b/src/components/Navbar.js index a836e22..3f31f93 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -46,7 +46,7 @@ const Navbar = () => { className="w-8" /> </span> - <span>Helping Hands</span> + <span className="max-sm:hidden">Helping Hands</span> </span> </Link> diff --git a/src/layouts/GridLayout.js b/src/layouts/GridLayout.js index 506a934..b2b61df 100644 --- a/src/layouts/GridLayout.js +++ b/src/layouts/GridLayout.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, {useEffect, useState} from "react"; import { HomeIcon, EnvelopeIcon, @@ -8,13 +8,34 @@ import { } from "@heroicons/react/24/outline" const GridLayout = ({ children }) => { + + const [selectedPage, setSelectedPage] = useState(() => { + const storedPage = localStorage.getItem('selectedPage'); + return storedPage ? storedPage : 'home'; + }); + + useEffect(() => { + localStorage.setItem('selectedPage', selectedPage); + }, [selectedPage]); + + const handlePageClick = (page) => { + setSelectedPage(page); + }; + + return ( - <div className="container px-8 mx-auto grid grid-cols-[96px,1fr,96px] gap-10"> + <div className="container px-8 mx-auto grid md:grid-cols-[96px,1fr] lg:grid-cols-[96px,1fr,96px] gap-10"> {/*Left column - sticky */} - <div className="self-start sticky top-0 col-span-1 pt-8 "> - <nav className="p-2 "> - <a href="/" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100"> + <div className="max-md:hidden self-start sticky top-0 col-span-1 pt-8 text-trueGray-500 "> + <nav className=""> + <a + href="/" + className={`flex items-center flex-col mb-4 hover:text-indigo-500 focus:text-indigo-500 p-1 rounded ${ + selectedPage === 'home' ? 'bg-indigo-50 text-indigo-500' : '' + }`} + onClick={() => handlePageClick('home')} + > <HomeIcon className="w-8 h-8" /> <button rel="noopener" @@ -22,7 +43,13 @@ const GridLayout = ({ children }) => { Home </button> </a> - <a href="/profile" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100"> + <a + href="/profile" + className={`flex items-center flex-col mb-4 hover:text-indigo-500 focus:text-indigo-500 p-1 rounded ${ + selectedPage === 'profile' ? 'bg-indigo-50 text-indigo-500' : '' + }`} + onClick={() => handlePageClick('profile')} + > <UserIcon className="w-8 h-8" /> <button rel="noopener" @@ -30,15 +57,27 @@ const GridLayout = ({ children }) => { Profile </button> </a> - <a href="/volunteer" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100"> + <a + href="/find-opportunities" + className={`flex items-center flex-col mb-4 hover:text-indigo-500 focus:text-indigo-500 p-1 rounded ${ + selectedPage === 'find-opportunities' ? 'bg-indigo-50 text-indigo-500' : '' + }`} + onClick={() => handlePageClick('find-opportunities')} + > <BriefcaseIcon className="w-8 h-8" /> <button rel="noopener" - className="mb-1 text-xs font-light whitespace-nowrap"> + className="mb-1 text-xs font-light whitespace-nowrap"> Find Opportunities </button> </a> - <a href="/volunteer" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100"> + <a + href="/recruit-volunteers" + className={`flex items-center flex-col mb-4 hover:text-indigo-500 focus:text-indigo-500 p-1 rounded ${ + selectedPage === 'recruit-volunteers' ? 'bg-indigo-50 text-indigo-500' : '' + }`} + onClick={() => handlePageClick('recruit-volunteers')} + > <BuildingStorefrontIcon className="w-8 h-8" /> <button rel="noopener" @@ -46,8 +85,13 @@ const GridLayout = ({ children }) => { Recruit Volunteers </button> </a> - <a href="/" className="flex items-center flex-col mb-4 text-trueGray-500 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100"> - <EnvelopeIcon className="w-8 h-8 " /> + <a + href="/messages" + className={`flex items-center flex-col mb-4 hover:text-indigo-500 p-1 rounded ${ + selectedPage === 'messages' ? 'bg-indigo-50 text-indigo-500' : '' + }`} + onClick={() => handlePageClick('messages')} + > <EnvelopeIcon className="w-8 h-8 " /> <button rel="noopener" className="mb-1 text-xs font-light"> @@ -58,7 +102,7 @@ const GridLayout = ({ children }) => { </div> {/*Middle column */} - <div className="overflow-auto bg-blue-300 h-screen"> + <div className="overflow-auto h-screen"> {children} </div> diff --git a/src/pages/FindOpportunities.js b/src/pages/FindOpportunities.js new file mode 100644 index 0000000..dab7647 --- /dev/null +++ b/src/pages/FindOpportunities.js @@ -0,0 +1,71 @@ +import React, { useContext } from 'react'; +import { AuthContext } from '../providers/AuthContext'; +import GridLayout from '../layouts/GridLayout'; +import { CalendarIcon, MapPinIcon, BuildingOfficeIcon } from "@heroicons/react/24/outline"; + + +const FindOpportunities = () => { + const { user } = useContext(AuthContext); + + const fakePosting = { + id: '69420', + name: 'Team Rocket', + location: 'Annapolis, MD', + title: 'Need Help Battling Mega Bidoof!', + description: "Mega Bidoof is crazy hard to battle. He's so big and strong and mega, and named Bidoof.", + date_posted: '04/23/2024', + date_scheduled: '05/01/2024', + time_scheduled: 'Flexible', + skills: ['Catch', 'Throw', 'Battle'] + } + + return ( + <> + {!user ? ( + <h1>tuna tees here</h1> + ) : ( + <GridLayout> + <> + <div className="flex w-full flex-col px-4 md:px-16"> + <div className="max-w-2xl text-2xl font-bold leading-snug tracking-tight text-gray-800 lg:leading-tight lg:text-4xl dark:text-white pb-2"> Search for Opportunities </div> + <ul className=""> + <div className="flex flex-row flex-grow-1 max-h-32 gap-2 p-2 flex-no-wrap border border-indigo-100 rounded-lg shadow-lg"> + + {/*Photo section*/} + <div className="max-md:hidden max-w-32 flex justify-center items-center"> + <div className="h-16 w-16 bg-indigo-100"></div> + </div> + + {/*Middle section*/} + <div className="flex flex-grow flex-col text-nowrap overflow-x-clip"> + <div className="text-md font-semibold"> {fakePosting.title} </div> + <div className="text-xs text-nowrap overflow-ellipsis text-gray-500">{fakePosting.description} </div> + <div className="text-[.6rem] text-nowrap grid md:grid-cols-3 sm:grid-cols-1 content-evenly"> + <div className="inline-flex col-span-1 items-center text-gray-500 gap-0.5"> <BuildingOfficeIcon className="h-4 w-4 text-indigo-500"/> {fakePosting.name} </div> + <div className="inline-flex items-center text-gray-500 gap-0.5"><CalendarIcon className="h-4 w-4 text-indigo-500"/> {fakePosting.date_posted} </div> + <div className="inline-flex items-center text-gray-500 gap-0.5"> <MapPinIcon className="h-4 w-4 text-indigo-500"/> {fakePosting.location} </div> + </div> + <div className="flex gap-1 text-indigo-500 text-[.6rem] mt-1 "> + <li className="border w-12 text-center border-indigo-300 rounded-lg shadow-lg"> {fakePosting.skills[0]} </li> + <li className="border w-12 text-center border-indigo-300 rounded-lg shadow-lg"> {fakePosting.skills[1]} </li> + <li className="border w-12 text-center border-indigo-300 rounded-lg shadow-lg"> {fakePosting.skills[2]} </li> + </div> + </div> + + {/*Apply section*/} + <div className="max-w-64 justify-center flex flex-col"> + <button className="bg-indigo-500 text-white rounded-md focus:bg-indigo-600 focus:outline-none">Apply</button> + <div className="inline-flex text-nowrap text-[.5rem] text-gray-500 ">Posted: {fakePosting.date_posted} </div> + </div> + + </div> + </ul> + </div> + </> + </GridLayout> + )} + </> + ); +}; + +export default FindOpportunities;
\ No newline at end of file diff --git a/src/pages/Messages.js b/src/pages/Messages.js new file mode 100644 index 0000000..b6aed5f --- /dev/null +++ b/src/pages/Messages.js @@ -0,0 +1,23 @@ +import React, { useContext } from 'react'; +import { AuthContext } from '../providers/AuthContext'; +import GridLayout from '../layouts/GridLayout'; + +const Messages = () => { + const { user } = useContext(AuthContext); + + return ( + <> + {!user ? ( + <h1>you got a DM from Barak Obamna</h1> + ) : ( + <GridLayout> + <> + you got a DM from Barak Obamna + </> + </GridLayout> + )} + </> + ); +}; + +export default Messages;
\ No newline at end of file diff --git a/src/pages/RecruitVolunteers.js b/src/pages/RecruitVolunteers.js new file mode 100644 index 0000000..c637656 --- /dev/null +++ b/src/pages/RecruitVolunteers.js @@ -0,0 +1,23 @@ +import React, { useContext } from 'react'; +import { AuthContext } from '../providers/AuthContext'; +import GridLayout from '../layouts/GridLayout'; + +const RecruitVolunteers = () => { + const { user } = useContext(AuthContext); + + return ( + <> + {!user ? ( + <h1>uncle sam want u</h1> + ) : ( + <GridLayout> + <> + uncle sam want u + </> + </GridLayout> + )} + </> + ); +}; + +export default RecruitVolunteers;
\ No newline at end of file |