1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
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;
|
