casl/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️ refactor: improve external links implementation

Browse Source
This commit is contained in:
m-tartari
2025-05-23 13:33:12 +00:00
parent 5fccaa6773
commit d4901e0e1a
9 changed files with 156 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/ContactPage/ContactPage.tsx
+55 -40
View File
@@ -1,20 +1,41 @@
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 { Link, List, ListItem, Stack, Typography } from '@mui/material'
import DraftsIcon from '@mui/icons-material/Drafts'
import LinkedInIcon from '@mui/icons-material/LinkedIn'
import GitHubIcon from '@mui/icons-material/GitHub'
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,
},
},
}))
interface ListItemProps {
children?: React.ReactNode
href?: string
}
const ListItemLink: React.FC<ListItemProps> = ({ children, ...props }) => (
<ListItem>
<Link
{...props}
rel="noopener noreferrer"
target="_blank"
underline="hover"
sx={theme => ({
color: 'inherit',
h6: {
color: theme.palette.text.secondary,
},
':hover': {
backgroundColor: 'transparent',
color: theme.palette.primary.main,
h6: {
color: theme.palette.primary.dark,
},
},
})}>
<Stack direction="row" alignItems="center">
{children}
</Stack>
</Link>
</ListItem>
)
const ContactPage = () => {
return (
@@ -23,32 +44,26 @@ const ContactPage = () => {
Feel free to contact me using any of the following:
</Typography>
<List>
<ListItem disablePadding>
<ListItemButton aria-label="Email button" onClick={() => window.open('mailto:info@m-tartari.eu', '_blank')}>
<DraftsIcon fontSize="large" />
<Typography variant="h6" ml={2}>
info
<wbr />
@m-tartari.eu
</Typography>
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton aria-label="LinkedIn button" 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 aria-label="GitHub button" onClick={() => window.open('https://www.github.com/m-tartari/', '_blank')}>
<GitHubIcon fontSize="large" />
<Typography variant="h6" ml={2}>
m-tartari
</Typography>
</ListItemButton>
</ListItem>
<ListItemLink href="mailto:info@m-tartari.eu" aria-label="Email link">
<DraftsIcon fontSize="large" />
<Typography variant="h6" ml={2}>
info
<wbr />
@m-tartari.eu
</Typography>
</ListItemLink>
<ListItemLink aria-label="LinkedIn link" href="https://www.linkedin.com/in/m-tartari/">
<LinkedInIcon fontSize="large" />
<Typography variant="h6" ml={2}>
m-tartari
</Typography>
</ListItemLink>
<ListItemLink aria-label="GitHub link" href="https://www.github.com/m-tartari/">
<GitHubIcon fontSize="large" />
<Typography variant="h6" ml={2}>
m-tartari
</Typography>
</ListItemLink>
</List>
</Page>
)