From 10cc86203c0b334985af8c8758834fd68cf6de03 Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Sat, 3 Feb 2024 14:17:41 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(atoms):=20standal?=
 =?UTF-8?q?one=20icon=20links?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/atoms/IconLinks/IconLinks.tsx | 41 ++++++++++++++++++++
 src/components/atoms/IconLinks/index.ts      |  1 +
 src/components/atoms/index.ts                |  1 +
 src/components/molecules/Footer/Footer.tsx   | 22 +++--------
 4 files changed, 48 insertions(+), 17 deletions(-)
 create mode 100644 src/components/atoms/IconLinks/IconLinks.tsx
 create mode 100644 src/components/atoms/IconLinks/index.ts

diff --git a/src/components/atoms/IconLinks/IconLinks.tsx b/src/components/atoms/IconLinks/IconLinks.tsx
new file mode 100644
index 0000000..5aa2f2e
--- /dev/null
+++ b/src/components/atoms/IconLinks/IconLinks.tsx
@@ -0,0 +1,41 @@
+import { Email, LinkedIn, GitHub, Description } from '@mui/icons-material'
+import { IconButtonProps } from '@mui/material'
+
+import IconButton from '../IconButton'
+
+interface IconLinkProps extends IconButtonProps {
+  href: string
+  fontSize?: 'small' | 'large' | 'medium' | 'inherit'
+}
+
+export const DescriptionIconLink = ({ href: to, fontSize, ...props }: IconLinkProps) => {
+  return (
+    <IconButton aria-label="Email-button" onClick={() => window.open(to, '_blank')} {...props}>
+      <Description fontSize={fontSize} />
+    </IconButton>
+  )
+}
+
+export const EmailIconLink = ({ href: to, fontSize, ...props }: IconLinkProps) => {
+  return (
+    <IconButton aria-label="Email-button" onClick={() => window.open(to, '_blank')} {...props}>
+      <Email fontSize={fontSize} />
+    </IconButton>
+  )
+}
+
+export const GitHubIconLink = ({ href: to, fontSize, ...props }: IconLinkProps) => {
+  return (
+    <IconButton aria-label="GitHub-button" onClick={() => window.open(to, '_blank')} {...props}>
+      <GitHub fontSize={fontSize} />
+    </IconButton>
+  )
+}
+
+export const LinkedInIconLink = ({ href: to, fontSize, ...props }: IconLinkProps) => {
+  return (
+    <IconButton aria-label="LinkedIn-button" onClick={() => window.open(to, '_blank')} {...props}>
+      <LinkedIn fontSize={fontSize} />
+    </IconButton>
+  )
+}
diff --git a/src/components/atoms/IconLinks/index.ts b/src/components/atoms/IconLinks/index.ts
new file mode 100644
index 0000000..5e3a24e
--- /dev/null
+++ b/src/components/atoms/IconLinks/index.ts
@@ -0,0 +1 @@
+export * from './IconLinks'
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
index fc4fbfa..169cda6 100644
--- a/src/components/atoms/index.ts
+++ b/src/components/atoms/index.ts
@@ -1 +1,2 @@
 export { default as IconLinks } from './IconButton'
+export * from './IconLinks'
diff --git a/src/components/molecules/Footer/Footer.tsx b/src/components/molecules/Footer/Footer.tsx
index 0c8a720..f0c3d2c 100644
--- a/src/components/molecules/Footer/Footer.tsx
+++ b/src/components/molecules/Footer/Footer.tsx
@@ -1,27 +1,15 @@
-import { Box, IconButton as MuiIconButton, Stack, Typography, styled } from '@mui/material'
-import { Email as EmailIcon, LinkedIn as LinkedInIcon, GitHub as GitHubIcon } from '@mui/icons-material'
+import { Box, Stack, Typography } from '@mui/material'
 
-const IconButton = styled(MuiIconButton)(({ theme }) => ({
-  ':hover': {
-    backgroundColor: 'transparent',
-    color: theme.palette.primary.main,
-  },
-}))
+import { EmailIconLink, GitHubIconLink, LinkedInIconLink } from 'components/atoms'
 
 const Footer = () => {
   const year = new Date().getFullYear()
   return (
     <Box sx={{ bgcolor: 'background.paper', p: 6, display: 'flex', alignItems: 'center', flexDirection: 'column' }} component="footer">
       <Stack direction="row">
-        <IconButton size="large" aria-label="LinkedIn-button" onClick={() => window.open('https://www.linkedin.com/in/m-tartari/', '_blank')}>
-          <LinkedInIcon fontSize="large" />
-        </IconButton>
-        <IconButton size="large" aria-label="GitHub-button" onClick={() => window.open('https://www.github.com/m-tartari/', '_blank')}>
-          <GitHubIcon fontSize="large" />
-        </IconButton>
-        <IconButton size="large" aria-label="Email-button" onClick={() => window.open('mailto:michele.tartari+web@live.com', '_blank')}>
-          <EmailIcon fontSize="large" />
-        </IconButton>
+        <LinkedInIconLink size="large" fontSize="large" href="https://www.linkedin.com/in/m-tartari/" />
+        <GitHubIconLink size="large" fontSize="large" href="https://www.github.com/m-tartari/" />
+        <EmailIconLink size="large" fontSize="large" href="mailto:michele.tartari+web@live.com" />
       </Stack>
       <Typography variant="subtitle2" align="center" color="text.secondary" component="em" mt={3}>
         &copy; {year} Michele Tartari. All rights reserved.