♻️ refactor(Curriculum): add dates

src/components/molecules/CurriculumItem/CurriculumItem.tsx

@@ -1,31 +1,57 @@
 import React from 'react'
-import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from '@mui/material'
+import { Accordion, AccordionDetails, AccordionSummary, 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>
-      <AccordionSummary expandIcon={<ExpandIcon />}>
-        <Box>
-          <Typography component="em" variant="h6" color="primary">
+    <Accordion
+      disableGutters
+      elevation={0}
+      sx={{
+        flexDirection: 'row-reverse',
+        '&:not(:last-child)': {
+          borderBottom: 0,
+        },
+        '&::before': {
+          display: 'none',
+        },
+      }}>
+      <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">
+          <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}
-          </Typography>
-          &nbsp; &nbsp;
-          <Typography component="b" variant="h6">
-            {props.title}
-          </Typography>
-          <br />
-          <Typography component="span" variant="overline" color="text.secondary">
+          </Grid>
+          <Grid item xs={9} component={Typography} variant="overline" color="text.secondary">
             {props.company}
-          </Typography>
-        </Box>
+          </Grid>
+          <Grid item xs={3} component={Typography} variant="subtitle1" color="text.secondary" textAlign="right">
+            <em>{props.location}</em>
+          </Grid>
+        </Grid>
       </AccordionSummary>
       <AccordionDetails>{props.children}</AccordionDetails>
     </Accordion>