99 lines
3.4 KiB
TypeScript
99 lines
3.4 KiB
TypeScript
import React from 'react'
|
|
import { Accordion, AccordionDetails, AccordionSummary, Box, Grid, Typography } from '@mui/material'
|
|
import { ExpandMore as ExpandIcon } from '@mui/icons-material'
|
|
|
|
interface CurriculumEntryProps {
|
|
title: string
|
|
dates: string
|
|
company?: string
|
|
location?: string
|
|
children?: React.ReactNode
|
|
}
|
|
|
|
const CurriculumItem = (props: CurriculumEntryProps) => {
|
|
return (
|
|
<Accordion
|
|
disableGutters
|
|
elevation={0}
|
|
sx={{
|
|
bgcolor: 'background.default', // use summary hover background
|
|
flexDirection: 'row-reverse',
|
|
'&:not(:last-child)': {
|
|
borderBottom: 0,
|
|
},
|
|
'&::before': {
|
|
display: 'none',
|
|
},
|
|
'&:hover': {
|
|
borderBottom: '1px solid',
|
|
borderTop: '1px solid',
|
|
bgcolor: 'background.paper', // use summary hover background
|
|
elevation: 1,
|
|
// '& .MuiAccordionSummary-expandIconWrapper .MuiSvgIcon-root': { color: 'primary.dark' }, // use summary hover icon color
|
|
},
|
|
'&.Mui-expanded': {
|
|
borderBottom: '1px solid',
|
|
borderTop: '1px solid',
|
|
bgcolor: 'background.paper', // use summary hover background
|
|
elevation: 1,
|
|
// '& .MuiAccordionSummary-expandIconWrapper .MuiSvgIcon-root': { color: 'primary.dark' }, // use summary hover icon color
|
|
},
|
|
}}>
|
|
<AccordionSummary
|
|
expandIcon={<ExpandIcon />}
|
|
sx={{
|
|
flexDirection: 'row-reverse',
|
|
'& .MuiAccordionSummary-expandIconWrapper': {
|
|
transform: 'rotate(-90deg)',
|
|
},
|
|
'& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
|
|
transform: 'rotate(0deg)',
|
|
},
|
|
'& .MuiAccordionSummary-content': {
|
|
marginLeft: 2,
|
|
},
|
|
}}>
|
|
<Grid container direction="row" justifyContent="space-between" alignItems="stretch" display={{ xs: 'none', sm: 'flex' }}>
|
|
<Grid item xs={9} component={Typography} variant="h6">
|
|
<b>{props.title}</b>
|
|
</Grid>
|
|
<Grid item xs={3} component={Typography} variant="h6" color="primary.main" textAlign="right">
|
|
{props.dates}
|
|
</Grid>
|
|
{typeof props.company !== 'undefined' && (
|
|
<Grid item xs={9} component={Typography} variant="overline" color="text.secondary">
|
|
{props.company}
|
|
</Grid>
|
|
)}
|
|
{typeof props.location !== 'undefined' && (
|
|
<Grid item xs={3} component={Typography} variant="subtitle1" color="text.secondary" textAlign="right">
|
|
<em>{props.location}</em>
|
|
</Grid>
|
|
)}
|
|
</Grid>
|
|
<Box display={{ xs: 'block', sm: 'none' }}>
|
|
<Typography variant="subtitle1" color="primary.main">
|
|
{props.dates}
|
|
</Typography>
|
|
<Typography variant="h6">
|
|
<b>{props.title}</b>
|
|
</Typography>
|
|
{typeof props.company !== 'undefined' && (
|
|
<Typography variant="button" color="text.secondary">
|
|
{props.company}
|
|
</Typography>
|
|
)}
|
|
{typeof props.location !== 'undefined' && (
|
|
<Typography variant="subtitle2" color="text.secondary">
|
|
<em>{props.location}</em>
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</AccordionSummary>
|
|
<AccordionDetails>{props.children}</AccordionDetails>
|
|
</Accordion>
|
|
)
|
|
}
|
|
|
|
export default CurriculumItem
|