refact: company card to links (#126)

Co-authored-by: wtlau <[email protected]>
wtLau · Oct 25, 2022 · 9b7ecb0 · 9b7ecb0
1 parent 9830719
commit 9b7ecb0
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 61 deletions.
diff --git a/components/CompanyCard/index.tsx b/components/CompanyCard/index.tsx
@@ -1,26 +1,10 @@
-import { Grid, ButtonBase, Card, Typography } from '@mui/material'
+import { Grid, ButtonBase, Card, Typography, Button } from '@mui/material'
 import { styled } from '@mui/material/styles'
 import Image from 'next/image'
 
 import { Link } from '@components/ui'
 import { CompanyType } from '@data/companyData'
 
-const PREFIX = 'CompanyCard'
-
-const classes = {
-  companyCard: `${PREFIX}-companyCard`,
-}
-
-const StyledGrid = styled(Grid)(({ theme }) => ({
-  [`& .${classes.companyCard}`]: {
-    minHeight: '200px',
-    background: theme.palette.background.paper,
-    borderRadius: '50px',
-    width: '100%',
-    padding: theme.spacing(3, 2),
-  },
-}))
-
 type CompanyCardType = {
   company: CompanyType
 }
@@ -29,35 +13,31 @@ function CompanyCard({ company }: CompanyCardType) {
   const { name, description, link, imageAlt, imageLocation, title } = company
 
   return (
-    <StyledGrid item xs={12}>
-      <Link href={link} target='_blank'>
-        <ButtonBase
-          className={classes.companyCard}
-          component={Card}
-          focusRipple
-        >
-          <Grid container alignItems='center' justifyContent='space-around'>
-            <Grid container item xs={2} justifyContent='center'>
-              <Image
-                src={imageLocation}
-                alt={imageAlt}
-                width={78}
-                height={90}
-              />
-            </Grid>
-            <Grid item xs={8}>
-              <Typography variant='h5'>{name}</Typography>
-              <Typography variant='body1' color='textSecondary'>
-                {title}
-              </Typography>
-              <Typography variant='caption' color='textSecondary'>
-                {description}
-              </Typography>
-            </Grid>
-          </Grid>
-        </ButtonBase>
-      </Link>
-    </StyledGrid>
+    <Grid
+      container
+      spacing={2}
+      sx={{
+        flexDirection: {
+          xs: 'column',
+          md: 'row',
+        },
+      }}
+    >
+      <Grid container item xs={2} justifyContent='center' alignItems='center'>
+        <Image src={imageLocation} alt={imageAlt} width={78} height={90} />
+      </Grid>
+      <Grid item xs={12} md={8}>
+        <Typography variant='h5' component={Link} href={link}>
+          {name}
+        </Typography>
+        <Typography variant='body1' color='textSecondary'>
+          {title}
+        </Typography>
+        <Typography variant='caption' color='textSecondary'>
+          {description}
+        </Typography>
+      </Grid>
+    </Grid>
   )
 }
 

diff --git a/pages/about.tsx b/pages/about.tsx
@@ -88,27 +88,26 @@ const About = () => {
             title='travel map'
           />
         </Grid>
-        <Grid item xs={12}>
-          {currentCompany ? (
-            <>
-              <Typography variant='h3' component='h2' gutterBottom>
-                Currently At
-              </Typography>
+        {currentCompany ? (
+          <Grid item xs={12}>
+            <Typography variant='h2' gutterBottom>
+              Currently At
+            </Typography>
+
+            <CompanyCard company={currentCompany} />
+          </Grid>
+        ) : null}
 
-              <CompanyCard company={currentCompany} />
-            </>
-          ) : null}
-        </Grid>
         <Grid item xs={12}>
-          <Typography variant='h3' component='h2' gutterBottom>
+          <Typography variant='h2' gutterBottom>
             Previous Experiences
           </Typography>
+
           <Grid spacing={4} container>
             {previousCompanies.map((previousCompany) => (
-              <CompanyCard
-                company={previousCompany}
-                key={previousCompany.name}
-              />
+              <Grid item key={previousCompany.name}>
+                <CompanyCard company={previousCompany} />
+              </Grid>
             ))}
           </Grid>
         </Grid>