46 jobs page

src/components/Header/DesktopHeader.tsx

@@ -35,6 +35,9 @@ const DesktopHeader: FC = () => {
             <StyledNavLink to="/team" style={{ textDecoration: 'none', color: 'white' }}>
                 <Typography variant="overline">{t('header.team')}</Typography>
             </StyledNavLink>
+            <StyledNavLink to="/jobs" style={{ textDecoration: 'none', color: 'white' }}>
+                <Typography variant="overline">{t('header.job')}</Typography>
+            </StyledNavLink>
             <StyledNavLink to="/codeofconduct" style={{ textDecoration: 'none', color: 'white' }}>
                 <Typography variant="overline">{t('header.codeOfConduct')}</Typography>
             </StyledNavLink>

src/components/JobCard/JobCard.tsx

@@ -0,0 +1,79 @@
+import { FC } from 'react'
+import { Stack, Grid, Avatar, Typography, Button, Chip, Card, CardContent } 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'
+import JobData from '@/types/JobListing'
+
+
+
+interface JobCardProps {
+    job: JobData
+}
+
+const JobCard: FC<JobCardProps> = ({ job }) => {
+    const handleReadMoreClick = () => {
+        window.open(job.jobPostingUrl, '_blank', 'noopener,noreferrer')
+    }
+
+    return <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: 90, height: 90, borderRadius: 2 }}
+                        alt={`${job.company} logo`}
+                        src={job.logoUrl}
+                    />
+                </Grid>
+                <Grid item xs={12} sm={12} md={8} mt={2}>
+                    <Typography variant="h5" mb={2} component="div" sx={{ textAlign: 'left' }}>
+                        {job.title}
+                    </Typography>
+                    <Grid container spacing={2}>
+                        <Grid item xs={12} sm={4} sx={{ display: 'flex', justifyContent: { xs: 'flex-start', sm: 'center' }, alignItems: 'center' }}>
+                            <BusinessIcon />
+                            <Typography fontSize="body2" sx={{ ml: 1 }}>{job.company}</Typography>
+                        </Grid>
+                        <Grid item xs={12} sm={4} sx={{ display: 'flex', justifyContent: { xs: 'flex-start', sm: 'center' }, alignItems: 'center' }}>
+                            <LocationOnIcon />
+                            <Typography fontSize="body2" sx={{ ml: 1 }}>{job.location}</Typography>
+                        </Grid>
+                        <Grid item xs={12} sm={4} sx={{ display: 'flex', justifyContent: { xs: 'flex-start', sm: 'center' }, alignItems: 'center' }}>
+                            <AccountBalanceWalletIcon />
+                            <Typography fontSize="body2" sx={{ ml: 1 }}>{job.salary}</Typography>
+                        </Grid>
+                    </Grid>
+                    <Stack direction='row' spacing={1} mt={2} justifyContent="flex-start">
+                        {job.tags.map((tag, index) => (
+                            <Chip key={index} label={tag} sx={{ bgcolor: '#6A1B9A', color: 'white', height: 32, borderRadius: '8px' }} />
+                        ))}
+                    </Stack>
+                </Grid>
+                <Grid item xs={12} sm={12} md={2} paddingRight={2} sx={{ order: { xs: -1, sm: -1, md: 0 }, alignSelf: { sm: 'flex-start' } }} display="flex" alignItems="center" justifyContent="right">
+                    <AccessTimeIcon sx={{ marginRight: 2 }} />
+                    <Typography fontSize="body2">
+                        { job.publicationDate }
+                    </Typography>
+                </Grid>
+                <Grid container spacing={1} justifyContent="right">
+                    <Grid item>
+                        <Button
+                            variant="contained"
+                            onClick={handleReadMoreClick}
+                            sx={{
+                                mt: 1,
+                                padding: '4px 8px',
+                            }}
+                        >
+                            Read More
+                        </Button>
+                    </Grid>
+                </Grid>
+            </Grid>
+        </CardContent>
+    </Card>
+}
+
+export default JobCard

src/components/SideDrawer/DrawerContents.tsx

@@ -35,6 +35,9 @@ const DrawerContents: FC<DrawerContentsProps> = ({ closeDrawer }) => {
             <ListItem>
                 <StyledNavLink to='/team'>{t('sidebar.team')}</StyledNavLink>
             </ListItem>
+            <ListItem>
+                <StyledNavLink to='/job'>{t('sidebar.job')}</StyledNavLink>
+            </ListItem>
             <ListItem>
                 <StyledNavLink to='/codeofconduct'>{t('sidebar.codeOfConduct')}</StyledNavLink>
             </ListItem>

src/i18n/en/translation.json

@@ -2,7 +2,8 @@
     "header": {
         "codeOfConduct": "Code of Conduct",
         "subtitle": "Women in Software Engineering Japan",
-        "team": "Team"
+        "team": "Team",
+        "job": "Jobs"
     },
     "home": {
         "helloWorld": "✨ Hello World ✨",
@@ -13,9 +14,14 @@
     },
     "sidebar": {
         "codeOfConduct": "Code of Conduct",
-        "team": "Team"
+        "team": "Team",
+        "job": "Job Board"
     },
     "team": {
         "title": "✨ Leadership Team ✨"
     }
+    ,
+    "job": {
+        "title": "✨ Job Board ✨"
+    }
 }

src/i18n/ja/translation.json

@@ -2,7 +2,8 @@
     "header": {
         "codeOfConduct": "行動規範",
         "subtitle": "ウーマン・イン・ソフトウェアエンジニアリング",
-        "team": "チーム"
+        "team": "チーム",
+        "job": "求人掲示板"
     },
     "home": {
         "helloWorld": "✨ Hello 世界 ✨",
@@ -13,9 +14,13 @@
     },
     "sidebar": {
         "codeOfConduct": "Code of Conduct",
-        "team": "チーム"
+        "team": "チーム",
+        "job": "求人掲示板"
     },
     "team": {
         "title": "✨ リーダーシップ・チーム ✨"
+    },
+    "job": {
+        "title": "✨ 求人掲示板 ✨"
     }
 }

src/routes/JobBoard/JobBoard.tsx

@@ -0,0 +1,24 @@
+import { FC, ReactNode } from 'react'
+import JobCard from '@/components/JobCard/JobCard'
+import { Container, Stack, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
+import  job from '@/routes/JobBoard/jobs.json'
+import JobData from '@/types/JobListing'
+
+const JobBoard:FC = () => {
+    const { t } = useTranslation()
+
+    const jobGrid: ReactNode[] = []
+    job.forEach((jobDescription: JobData) => {
+        jobGrid.push(<JobCard job={jobDescription}/>)
+    })
+
+    return <Container style={{ padding: 32 }} aria-label="job-board-container">
+        <Stack spacing={4}>
+            <Typography variant="h1">{t('job.title')}</Typography>
+            {jobGrid}
+        </Stack>
+    </Container>
+}
+
+export default JobBoard

src/routes/JobBoard/jobs.json

@@ -0,0 +1,12 @@
+[
+    {
+        "title": "Software Engineer",
+        "company": "Amazon Web Services",
+        "logoUrl": "/",
+        "location": "Tokyo, Japan",
+        "jobPostingUrl": "http://example.com",
+        "salary": "¥9M ~ ¥11M annually",
+        "publicationDate": "2024/07/27",
+        "tags": ["Full Time", "Senior Level", "Remote", "English"]
+    }
+]

src/routes/Router.tsx

@@ -9,6 +9,7 @@ import BaseLayout from './BaseLayout'
 import NotFound from './NotFound/NotFound'
 import CodeOfConduct from './CodeOfConduct/CodeOfConduct'
 import Team from './Team/Team'
+import JobBoard from './JobBoard/JobBoard'
 
 const browserRouter = createHashRouter([{
     element: <BaseLayout />,
@@ -25,6 +26,10 @@ const browserRouter = createHashRouter([{
             path: 'team',
             element: <Team />
         },
+        {
+            path: 'jobs',
+            element: <JobBoard />
+        },
         {
             path: 'theme',
             element: <ThemePreview />

src/types/JobListing.ts

@@ -0,0 +1,12 @@
+type JobListing = {
+    title:string,
+    company: string,
+    logoUrl: string,
+    location: string,
+    jobPostingUrl: string,
+    salary: string,
+    publicationDate: string,
+    tags: string []
+}
+
+export default JobListing