diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/pages/FindOpportunities.js | 49 |
1 files changed, 31 insertions, 18 deletions
diff --git a/src/pages/FindOpportunities.js b/src/pages/FindOpportunities.js index 894a30a..44acfa2 100644 --- a/src/pages/FindOpportunities.js +++ b/src/pages/FindOpportunities.js @@ -1,7 +1,7 @@ import React, { useContext } from 'react'; import { AuthContext } from '../providers/AuthContext'; import GridLayout from '../layouts/GridLayout'; -import { CalendarIcon, MapPinIcon, } from "@heroicons/react/24/outline"; +import { CalendarIcon, MapPinIcon, BuildingOfficeIcon } from "@heroicons/react/24/outline"; const FindOpportunities = () => { @@ -15,7 +15,8 @@ const FindOpportunities = () => { 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' + time_scheduled: 'Flexible', + skills: ['Catch', 'Throw', 'Battle'] } return ( @@ -25,28 +26,40 @@ const FindOpportunities = () => { ) : ( <GridLayout> <> - <div className="flex w-full flex-col"> - <div className="max-w-2xl mt-3 pb-4 text-2xl font-bold leading-snug tracking-tight text-gray-800 lg:leading-tight lg:text-4xl dark:text-white"> Search for Opportunities </div> + <div className="flex w-full flex-col px-8 md:px-2 lg:px-32"> + <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="grid grid-cols-[128px,1fr,128px] h-32 border border-gray-100 rounded-md shadow-md"> - <div className="max-md:hidden col-span-1 p-4 bg-gray-100 m-3 rounded"></div> - <div className="col-span-1 pt-4"> - <div className="text-lg font-semibold"> {fakePosting.title} </div> - <div className="text-xs line-clamp- text-gray-500">{fakePosting.description} </div> - <div className="text-xs grid grid-cols-3 place-content-between"> - <div className="inline-flex "><CalendarIcon className="h-4 w-4"/> {fakePosting.date_posted} </div> - <div className="inline-flex "> <MapPinIcon className="h-4 w-4"/> {fakePosting.location} </div> - <div className="inline-flex "> <MapPinIcon className="h-4 w-4"/> {fakePosting.location} </div> - </div> - </div> - <button className="col-span-1 bg-indigo-500 rounded my-12 mx-4 items-center justify-center ">Apply</button> - + <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> - </ul> + {/*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> |