♻️ refactor(atoms): standalone icon links

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>
+  )
+}

src/components/atoms/IconLinks/index.ts

@@ -0,0 +1 @@
+export * from './IconLinks'

src/components/atoms/index.ts

@@ -1 +1,2 @@
 export { default as IconLinks } from './IconButton'
+export * from './IconLinks'

src/components/molecules/Footer/Footer.tsx

@@ -1,27 +1,15 @@
-import { Box, IconButton as MuiIconButton, Stack, Typography, styled } from '@mui/material'
+import { Box, Stack, Typography } from '@mui/material'
-import { Email as EmailIcon, LinkedIn as LinkedInIcon, GitHub as GitHubIcon } from '@mui/icons-material'
 
-const IconButton = styled(MuiIconButton)(({ theme }) => ({
+import { EmailIconLink, GitHubIconLink, LinkedInIconLink } from 'components/atoms'
-  ':hover': {
-    backgroundColor: 'transparent',
-    color: theme.palette.primary.main,
-  },
-}))
 
 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')}>
+        <LinkedInIconLink size="large" fontSize="large" href="https://www.linkedin.com/in/m-tartari/" />
-          <LinkedInIcon fontSize="large" />
+        <GitHubIconLink size="large" fontSize="large" href="https://www.github.com/m-tartari/" />
-        </IconButton>
+        <EmailIconLink size="large" fontSize="large" href="mailto:michele.tartari+web@live.com" />
-        <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>
       </Stack>
       <Typography variant="subtitle2" align="center" color="text.secondary" component="em" mt={3}>
         &copy; {year} Michele Tartari. All rights reserved.