diff options
Diffstat (limited to 'src/pages')
-rw-r--r-- | src/pages/FindOpportunities.js | 71 | ||||
-rw-r--r-- | src/pages/Messages.js | 23 | ||||
-rw-r--r-- | src/pages/RecruitVolunteers.js | 23 |
3 files changed, 117 insertions, 0 deletions
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 |