From bac2fc8e70cdc0b6985a77b41ce5d178f96a16da Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Mon, 22 Jan 2024 18:51:48 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20`ContactsPage`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                   |  6 +-
 .../pages/ContactPage/ContactPage.tsx         | 55 +++++++++++++++++++
 src/components/pages/ContactPage/index.ts     |  1 +
 src/components/pages/index.ts                 |  1 +
 4 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 src/components/pages/ContactPage/ContactPage.tsx
 create mode 100644 src/components/pages/ContactPage/index.ts

diff --git a/src/App.tsx b/src/App.tsx
index 7120c9d..2d9574b 100644
--- a/src/App.tsx
+++ b/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} />
diff --git a/src/components/pages/ContactPage/ContactPage.tsx b/src/components/pages/ContactPage/ContactPage.tsx
new file mode 100644
index 0000000..a8e372d
--- /dev/null
+++ b/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
diff --git a/src/components/pages/ContactPage/index.ts b/src/components/pages/ContactPage/index.ts
new file mode 100644
index 0000000..1efbd59
--- /dev/null
+++ b/src/components/pages/ContactPage/index.ts
@@ -0,0 +1 @@
+export { default } from './ContactPage'
diff --git a/src/components/pages/index.ts b/src/components/pages/index.ts
index 74a0199..3281232 100644
--- a/src/components/pages/index.ts
+++ b/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'