Created
May 4, 2021 20:50
-
-
Save th3o6a1d/cb32aa2202cf1d86bc94205def7a0cb9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
render() { | |
return ( | |
<div> | |
<table className="table table-auto mx-auto"> | |
<tbody className="bg-white divide-y divide-gray-200"> | |
{this.state.rows ? ( | |
this.state.rows.map((row, i) => { | |
return ( | |
<tr | |
key={Math.random()} | |
className="hover:bg-gray-200" | |
onMouseEnter={(e) => this.toggleApply(e, i)} | |
onMouseLeave={(e) => this.toggleApply(e, i)} | |
value={i} | |
> | |
{/* Date */} | |
<td className="px-3 py-8">{this.dateDiff(row['Date'])}</td> | |
{/* Logo */} | |
<td className="h-15 w-20"> | |
<img className="" src={row['Company Logo']} alt="" /> | |
</td> | |
{/* Company Link */} | |
<td className="px-3 py-3"> | |
<a | |
className="text-blue-800 hover:bg-gray-200" | |
href={row['Company Link']} | |
> | |
{row['Company']} | |
</a> | |
<div | |
onClick={(e) => this.toggleJD(e, i)} | |
className="flex cursor-pointer py-1 text-blue-800 font-bold hover:bg-gray-200" | |
> | |
{row['Job Title']} | |
{this.state.showJD !== i ? ( | |
<svg | |
xmlns="http://www.w3.org/2000/svg" | |
className="ml-2 h-6 w-6" | |
fill="none" | |
viewBox="0 0 24 24" | |
stroke="currentColor" | |
> | |
<path | |
strokeLinecap="round" | |
strokeLinejoin="round" | |
strokeWidth={0.5} | |
d="M19 13l-7 7-7-7m14-8l-7 7-7-7" | |
/> | |
</svg> | |
) : ( | |
<svg | |
xmlns="http://www.w3.org/2000/svg" | |
className="ml-2 h-6 w-6" | |
fill="none" | |
viewBox="0 0 24 24" | |
stroke="currentColor" | |
> | |
<path | |
strokeLinecap="round" | |
strokeLinejoin="round" | |
strokeWidth={0.5} | |
d="M5 11l7-7 7 7M5 19l7-7 7 7" | |
/> | |
</svg> | |
)} | |
</div> | |
<div className="text-xs">{row['Location']}</div> | |
{this.state.showJD === i ? ( | |
<p | |
onClick={(e) => this.toggleJD(e, i)} | |
className="py-4 whitespace-pre-line text-justify" | |
> | |
<div dangerouslySetInnerHTML={{__html:this.parseMarkdown(row['Job Description'])}}/> | |
</p> | |
) : null} | |
</td> | |
<td className="text-xs"> | |
{row['Categories'] | |
? row['Categories'].split(',').map((cat) => { | |
return ( | |
<div | |
key={Math.random()} | |
className="rounded-sm border-solid border-4 mx-auto border-gray-400 bg-white p-0.5 my-0.5 text-center" | |
> | |
{cat.toUpperCase()} | |
</div> | |
) | |
}) | |
: null} | |
</td> | |
<td className="p-2" onClick={null}> | |
{this.state.selected === i ? ( | |
<a key={Math.random()} href={row['Job Link']}> | |
<div className="text:sm p-2 bg-red-400 rounded-sm text-center text-gray-800 font-bold hover:bg-gray-200 hover:cursor"> | |
Apply | |
</div> | |
</a> | |
) : null} | |
</td> | |
</tr> | |
) | |
}) | |
) : ( | |
<div className="p-4">loading...</div> | |
)} | |
</tbody> | |
</table> | |
<div className="hidden">{JSON.stringify(data)}</div> | |
</div> | |
) | |
} | |
} | |
export default Jobs |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment