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,80 @@
+import { FC } from 'react'
+import { 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: 'primary.dark', width: '100%' }}>
+        <CardContent>
+            <Grid container spacing={1} alignItems="center">
+                <Grid item xs={12} sm={12} md={2} display="flex" justifyContent="center">
+                    <Avatar
+                        sx={{ bgcolor: 'white', width: 100, height: 100, borderRadius: 2,  img: {objectFit: 'contain', width: '90%', height: '100%'}
+                        }}
+                        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>
+                    <Grid direction='row' spacing={1} mt={2} justifyContent="flex-start" flexWrap="wrap">
+                        {job.tags.map((tag, index) => (
+                            <Chip key={index} label={tag} sx={{ bgcolor: 'secondary.dark', height: 32, borderRadius: '8px', mt: { xs: 2, sm: 0 }, ml: { xs: 1, sm: 1 }, flexShrink: 0 }} />
+                        ))}
+                    </Grid>
+                </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"
+                            color='tertiary'
+                            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,32 @@
+[
+    {
+        "title": "Sr. Software Development Engineer, Japan Pricing and Promotions",
+        "company": "Amazon Web Services",
+        "logoUrl": "/Amazon-logo.png",
+        "location": "Tokyo, Japan",
+        "jobPostingUrl": "https://www.amazon.jobs/en/jobs/2719073/sr-software-development-engineer-japan-pricing-and-promotions",
+        "salary": "-",
+        "publicationDate": "2024/08/25",
+        "tags": ["Full Time", "Senior Level", "English"]
+    },
+    {
+        "title": "Software Development Engineer, Amazon Points, JP Points CX",
+        "company": "Amazon Web Services",
+        "logoUrl": "/Amazon-logo.png",
+        "location": "Tokyo, Japan",
+        "jobPostingUrl": "https://www.amazon.jobs/en/jobs/2725444/software-development-engineer-amazon-points-jp-points-cx",
+        "salary": "-",
+        "publicationDate": "2024/08/25",
+        "tags": ["Full Time", "English"]
+    },
+    {
+        "title": "Senior Business Intelligence Engineer, JP Retail Science",
+        "company": "Amazon Web Services",
+        "logoUrl": "/Amazon-logo.png",
+        "location": "Tokyo, Japan",
+        "jobPostingUrl": "https://www.amazon.jobs/en/jobs/2560382/senior-business-intelligence-engineer-jp-retail-science",
+        "salary": "-",
+        "publicationDate": "2024/08/25",
+        "tags": ["Full Time", "Senior Level", "SQL skills", "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/routes/ThemePreview/__test__/ColorSwatch.test.tsx

@@ -22,7 +22,7 @@ describe('ColorSwatch', () => {
     it('should display a tertiary color swatch', async () => {
         render(<ColorSwatch color='tertiary' data-testid="swatch" />)
         const swatch = await screen.findByTestId('swatch')
-        expect(swatch).toHaveStyle('background-color: rgb(0, 105, 92);')
+        expect(swatch).toHaveStyle('background-color: rgb(40,53,147);')
     })
 
     it('should gracefully handle an unknown color', async () => {

src/theme/theme.ts

@@ -1,14 +1,14 @@
 import createTheme from '@mui/material/styles/createTheme'
 import typography from './typography/default'
-import { teal, lightBlue, deepPurple, purple, grey } from '@mui/material/colors'
+import { lightBlue, deepPurple, purple, grey, indigo } from '@mui/material/colors'
 
 const theme = createTheme({
     palette: {
         mode: 'dark',
         primary: {
-            light: purple[200],
+            light: purple[700],
             main: purple[800],
-            dark: purple[700],
+            dark: purple[900],
             contrastText: '#FFF'
         },
         secondary: {
@@ -18,9 +18,9 @@ const theme = createTheme({
             contrastText: '#000',
         },
         tertiary: {
-            light: teal[400],
-            main: teal[800],
-            dark: teal[900],
+            light: indigo[500],
+            main: indigo[800],
+            dark: indigo[900],
             contrastText: '#fff',
         },
         action: {
@@ -35,7 +35,6 @@ const theme = createTheme({
             paper: deepPurple[900]
         },
         divider: lightBlue[300]
-
     },
     typography
 })

src/types/JobListing.ts

@@ -0,0 +1,12 @@
+type JobListing = {
+    title: string,
+    company: string,
+    logoUrl: string,
+    location: string,
+    jobPostingUrl: string,
+    salary: string,
+    publicationDate: string, // date format should be YYYY/MM/DD
+    tags: string []
+}
+
+export default JobListing