Work page (#29)

src/app/about/page.tsx

@@ -1,22 +1,23 @@
 import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
 import { Metadata } from 'next';
 
+import PageContainer from '@/components/PageContainer';
+
 export const metadata: Metadata = {
   title: 'About',
 };
 
 const About: React.FC = () => {
   return (
-    <Box>
+    <PageContainer>
       <Typography variant="h1">About</Typography>
       <Typography>
         Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsum tempore
         a praesentium perferendis doloremque, veniam minus quis laborum, numquam
         blanditiis sunt ex consectetur asperiores assumenda nisi laboriosam et
         tempora quos.
       </Typography>
-    </Box>
+    </PageContainer>
   );
 };
 

src/app/contact/page.tsx

@@ -5,14 +5,15 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 
 import ExternalLink from '@/components/ExternalLink';
+import PageContainer from '@/components/PageContainer';
 
 export const metadata: Metadata = {
   title: 'Contact',
 };
 
 const Contact: React.FC = () => {
   return (
-    <Box>
+    <PageContainer>
       <Box component="section">
         <Typography variant="h1">Contact</Typography>
         <Typography>
@@ -47,7 +48,7 @@ const Contact: React.FC = () => {
           </ListItem>
         </List>
       </Box>
-    </Box>
+    </PageContainer>
   );
 };
 

src/app/work/ChipList.tsx

@@ -0,0 +1,25 @@
+import List, { ListProps } from '@mui/material/List';
+
+interface ChipListProps extends ListProps {
+  children: React.ReactNode;
+}
+
+const ChipList: React.FC<ChipListProps> = ({ children, ...props }) => {
+  return (
+    <List
+      {...props}
+      data-testid="chip-list"
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      {children}
+    </List>
+  );
+};
+
+export default ChipList;

src/app/work/ChipListItem.tsx

@@ -0,0 +1,23 @@
+import ListItem, { ListItemProps } from '@mui/material/ListItem';
+
+interface ChipListItemProps extends ListItemProps {
+  children: React.ReactNode;
+}
+
+const ChipListItem: React.FC<ChipListItemProps> = ({ children, ...props }) => {
+  return (
+    <ListItem
+      {...props}
+      data-testid="chip-list-item"
+      sx={{
+        pr: 1,
+        pl: 0,
+        width: 'initial',
+      }}
+    >
+      {children}
+    </ListItem>
+  );
+};
+
+export default ChipListItem;

src/app/work/WorkPanel.tsx

@@ -0,0 +1,79 @@
+import Box, { BoxProps } from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Chip from '@mui/material/Chip';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+
+import { WorkItemType } from './constants';
+import ChipList from './ChipList';
+import ChipListItem from './ChipListItem';
+
+interface WorkPanelProps extends BoxProps {
+  item: WorkItemType;
+}
+
+const WorkPanel: React.FC<WorkPanelProps> = ({ item, ...props }) => {
+  return (
+    <Box {...props} role="tabpanel">
+      <Box sx={{ p: 3 }}>
+        <Typography variant="h5" component="h2">
+          {item.company} | {item.title}
+        </Typography>
+        <Typography variant="overline">
+          {item.startDate} - {item.endDate}
+        </Typography>
+        <Typography variant="subtitle2">{item.location}</Typography>
+        {!!item.experience.length && (
+          <List data-testid="experience-list">
+            {item.experience.map((experience, index) => {
+              return (
+                <ListItem
+                  key={index}
+                  data-testid="experience-list-item"
+                  sx={(theme) => ({
+                    '&::before': {
+                      content: '"-"',
+                      pr: theme.spacing(0.5),
+                      alignSelf: 'flex-start',
+                    },
+                  })}
+                >
+                  <Typography variant="body2">{experience}</Typography>
+                </ListItem>
+              );
+            })}
+          </List>
+        )}
+        {!!item.skills.length && (
+          <ChipList>
+            {item.skills.map((skill) => {
+              return (
+                <ChipListItem key={skill}>
+                  <Chip label={skill} color="primary" size="small" />
+                </ChipListItem>
+              );
+            })}
+          </ChipList>
+        )}
+        {!!item.tools.length && (
+          <ChipList>
+            {item.tools.map((tool) => {
+              return (
+                <ChipListItem key={tool}>
+                  <Chip
+                    label={tool}
+                    variant="outlined"
+                    color="primary"
+                    size="small"
+                  />
+                </ChipListItem>
+              );
+            })}
+          </ChipList>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+export default WorkPanel;

src/app/work/WorkTabs.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { useState, SyntheticEvent } from 'react';
+import Box from '@mui/material/Box';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+
+import { WorkItemType } from './constants';
+import WorkPanel from './WorkPanel';
+
+type GetIdType = (index: number) => string;
+
+const getTabId: GetIdType = (index) => `work-tab-${index}`;
+const getTabPanelId: GetIdType = (index) => `work-tabpanel-${index}`;
+
+type TabsOnChange = (event: SyntheticEvent, value: any) => void;
+
+interface WorkTabsProps {
+  items: WorkItemType[];
+}
+
+const WorkTabs: React.FC<WorkTabsProps> = ({ items }) => {
+  const [value, setValue] = useState(0);
+
+  const handleChange: TabsOnChange = (_, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs
+          value={value}
+          onChange={handleChange}
+          aria-label="work experience tabs"
+          variant="scrollable"
+          scrollButtons
+          allowScrollButtonsMobile
+          // https://mui.com/base-ui/react-tabs/#keyboard-navigation
+          selectionFollowsFocus
+        >
+          {items.map((item, index) => {
+            return (
+              <Tab
+                key={item.company}
+                label={item.company}
+                id={getTabId(index)}
+                aria-controls={getTabPanelId(index)}
+              />
+            );
+          })}
+        </Tabs>
+      </Box>
+      {items.map((item, index) => {
+        const isActive = value === index;
+        return (
+          <WorkPanel
+            key={item.id}
+            item={item}
+            hidden={!isActive}
+            id={getTabPanelId(index)}
+            aria-labelledby={getTabId(index)}
+            data-testid={item.id}
+          />
+        );
+      })}
+    </Box>
+  );
+};
+
+export default WorkTabs;