Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

46 jobs page #61

Merged
merged 20 commits into from
Sep 1, 2024
Merged
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 107 additions & 0 deletions src/components/JobCard/JobCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import { FC } from 'react'
import { Grid, Avatar, Typography, Button, Chip, Card, CardContent, Stack } from '@mui/material'
import BusinessIcon from '@mui/icons-material/Business'
import LocationOnIcon from '@mui/icons-material/LocationOn'
import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'
import AccessTimeIcon from '@mui/icons-material/AccessTime'


interface JobCardProps {
title: string;
company: string;
logoUrl: string;
jobPostingUrl: string;
location:string,
salary: string;
publicationDate:string;
tags: string[];
}

const JobCard: FC<JobCardProps> = ({ title, company, logoUrl, jobPostingUrl, location, salary, publicationDate, tags }) => {
const handleReadMoreClick = () => {
if (jobPostingUrl) {
window.open(jobPostingUrl, '_blank', 'noopener,noreferrer')
} else {
console.error('No URL provided')
MariaAmariya marked this conversation as resolved.
Show resolved Hide resolved
}
}

return (
<Stack spacing={1} alignItems="center">
MariaAmariya marked this conversation as resolved.
Show resolved Hide resolved
<Card sx={{ bgcolor: '#512DA8', color: 'white', width: '100%' }}>
<CardContent>
<Grid container spacing={1} alignItems="center">
<Grid item xs={12} sm={12} md={2} display="flex" justifyContent="center">
<Avatar
sx={{ bgcolor: 'grey', width: 80, height: 80, borderRadius: 2 }}
alt={`${company} logo`}
src={logoUrl}
/>
</Grid>
<Grid item xs={12} sm={12} md={8}>
<Typography variant="h6" component="div" sx={{ textAlign: 'left' }}>
{title}
</Typography>
<Grid container spacing={2}>
<Grid item xs={12} sm={4} sx={{ display: 'flex', justifyContent: { xs: 'flex-start', sm: 'center' }, alignItems: 'center' }}>
<BusinessIcon fontSize="small" />
<Typography fontSize="medium" sx={{ ml: 1 }}>{company}</Typography>
</Grid>
<Grid item xs={12} sm={4} sx={{ display: 'flex', justifyContent: { xs: 'flex-start', sm: 'center' }, alignItems: 'center' }}>
<LocationOnIcon fontSize="small" />
<Typography fontSize="medium" sx={{ ml: 1 }}>{location}</Typography>
</Grid>
<Grid item xs={12} sm={4} sx={{ display: 'flex', justifyContent: { xs: 'flex-start', sm: 'center' }, alignItems: 'center' }}>
<AccountBalanceWalletIcon fontSize="small" />
<Typography fontSize="medium" sx={{ ml: 1 }}>{salary}</Typography>
MariaAmariya marked this conversation as resolved.
Show resolved Hide resolved
</Grid>
</Grid>
<Grid container spacing={1} mt={0.5} justifyContent="flex-start">
{tags.map((tag, index) => (
<Grid item key={index}>
<Chip label={tag} sx={{ bgcolor: '#6A1B9A', color: 'white', height: 32, borderRadius: '8px' }} />
</Grid>
))}
</Grid>
MariaAmariya marked this conversation as resolved.
Show resolved Hide resolved
</Grid>
<Grid item xs={12} sm={12} md={2} sx={{ order: { xs: -1, sm: -1, md:0 }, alignSelf: { sm: 'flex-start' } }} display="flex">
<Grid container spacing={1} justifyContent="right">
<Grid item>
<AccessTimeIcon fontSize="small" />
MariaAmariya marked this conversation as resolved.
Show resolved Hide resolved
</Grid>
<Grid item>
<Typography fontSize="medium">
{ publicationDate }
</Typography>
</Grid>
</Grid>
</Grid>
<Grid container spacing={1} justifyContent="right">
<Grid item>
<Button
variant="contained"
color="secondary"
onClick={handleReadMoreClick}
sx={{
mt: 1,
bgcolor: '#6A1B9A',
color: 'white',
fontSize: 'small',
MariaAmariya marked this conversation as resolved.
Show resolved Hide resolved
padding: '4px 8px',
'&:hover': {
bgcolor: '#512DA8'
}
}}
>
Read More
</Button>
</Grid>
</Grid>
</Grid>
</CardContent>
</Card>
</Stack>
)
}

export default JobCard
26 changes: 26 additions & 0 deletions src/routes/JobBoard/JobBoard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { FC } from 'react'
import JobCard from '@/components/JobCard/JobCard'
import { Container } from '@mui/material'
import { jobData } from '@/utils/jobData'

const JobBoard:FC = () => {
return (
<Container style={{ padding: 25 }}>
{jobData.map((job, index) => (
<JobCard
key={index}
title={job.title}
MariaAmariya marked this conversation as resolved.
Show resolved Hide resolved
company={job.company}
logoUrl={job.logoUrl}
location={job.location}
jobPostingUrl={job.jobPostingUrl}
salary={job.salary}
publicationDate={job.publicationDate}
tags={job.tags}
/>
))}
</Container>
)
}

export default JobBoard
5 changes: 5 additions & 0 deletions src/routes/Router.tsx
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@ import Home from './Home/Home'
import BaseLayout from './BaseLayout'
import NotFound from './NotFound/NotFound'
import CodeOfConduct from './CodeOfConduct/CodeOfConduct'
import JobBoard from './JobBoard/JobBoard'

const browserRouter = createHashRouter([{
element: <BaseLayout />,
@@ -20,6 +21,10 @@ const browserRouter = createHashRouter([{
path: 'codeofconduct',
element: <CodeOfConduct />
},
{
path: 'jobboard',
MariaAmariya marked this conversation as resolved.
Show resolved Hide resolved
element: <JobBoard />
},
{
path: 'theme',
element: <ThemePreview />
15 changes: 15 additions & 0 deletions src/utils/jobData.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// TODO: Add real job data
MariaAmariya marked this conversation as resolved.
Show resolved Hide resolved
const jobData = [
{
title: 'Software Engineer',
company: 'Amazon Web Services (AWS)',
logoUrl: '/',
location: 'Tokyo, Japan',
jobPostingUrl: '#',
MariaAmariya marked this conversation as resolved.
Show resolved Hide resolved
salary: '¥9M ~ ¥11M annually',
publicationDate: '2024/07/27',
tags: ['Full Time', 'Senior Level', 'Remote', 'English']
}
]

export { jobData }