✨ feat: add ContactsPage

src/App.tsx

@@ -1,6 +1,6 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 
-import { ErrorPage, MainPage } from 'components/pages'
+import { MainPage, ContactPage, ErrorPage } from 'components/pages'
 
 const router = createBrowserRouter([
   {
@@ -8,6 +8,10 @@ const router = createBrowserRouter([
     element: <MainPage />,
     errorElement: <ErrorPage />,
   },
+  {
+    path: '/contacts',
+    element: <ContactPage />,
+  },
 ])
 
 const App = () => <RouterProvider router={router} />

src/components/pages/ContactPage/ContactPage.tsx

@@ -0,0 +1,55 @@
+import { List, ListItem, ListItemButton as MuiListItemButton, Typography, styled } from '@mui/material'
+import { Drafts as DraftsIcon, LinkedIn as LinkedInIcon, GitHub as GitHubIcon } from '@mui/icons-material'
+
+import { Page } from 'components/templates'
+
+const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
+  h6: {
+    color: theme.palette.text.secondary,
+  },
+  ':hover': {
+    backgroundColor: 'transparent',
+    color: theme.palette.primary.main,
+    h6: {
+      color: theme.palette.primary.dark,
+    },
+  },
+}))
+
+const ContactPage = () => {
+  return (
+    <Page title="Contacts">
+      <Typography align="left" variant="h6">
+        Feel free to contact me using any of the following:
+      </Typography>
+      <List>
+        <ListItem disablePadding>
+          <ListItemButton onClick={() => window.open('mailto:michele.tartari+web@live.com', '_blank')}>
+            <DraftsIcon fontSize="large" />
+            <Typography variant="h6" ml={2}>
+              michele.tartari+web@live.com
+            </Typography>
+          </ListItemButton>
+        </ListItem>
+        <ListItem disablePadding>
+          <ListItemButton onClick={() => window.open('https://www.linkedin.com/in/m-tartari/', '_blank')}>
+            <LinkedInIcon fontSize="large" />
+            <Typography variant="h6" ml={2}>
+              m-tartari
+            </Typography>
+          </ListItemButton>
+        </ListItem>
+        <ListItem disablePadding>
+          <ListItemButton onClick={() => window.open('https://www.github.com/m-tartari/', '_blank')}>
+            <GitHubIcon fontSize="large" />
+            <Typography variant="h6" ml={2}>
+              m-tartari
+            </Typography>
+          </ListItemButton>
+        </ListItem>
+      </List>
+    </Page>
+  )
+}
+
+export default ContactPage

src/components/pages/ContactPage/index.ts

@@ -0,0 +1 @@
+export { default } from './ContactPage'

src/components/pages/index.ts

@@ -1,3 +1,4 @@
 export { default as MainPage } from './MainPage'
+export { default as ContactPage } from './ContactPage'
 
 export { default as ErrorPage } from './ErrorPage'