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

♻️ refactor(atoms): streamline IconLinks creation

Browse Source 
this also add several new icons
This commit is contained in:
m-tartari
2024-02-14 17:44:06 +01:00
parent 76db623bb3
commit a5dd52e425
1 changed files with 25 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/atoms/IconLinks/IconLinks.tsx
+25 -28
View File
@@ -1,41 +1,38 @@
import { Email, LinkedIn, GitHub, Description } from '@mui/icons-material' import { Email, LinkedIn, GitHub, Description, OndemandVideo, School } from '@mui/icons-material'
import { IconButtonProps } from '@mui/material' import { Badge, IconButtonProps, SvgIcon } from '@mui/material'
import IconButton from '../IconButton' import IconButton from '../IconButton'
interface IconLinkProps extends IconButtonProps { interface IconLinkProps extends IconButtonProps {
href: string href: string
fontSize?: 'small' | 'large' | 'medium' | 'inherit' fontSize?: 'small' | 'large' | 'medium' | 'inherit'
index?: number
} }
export const DescriptionIconLink = ({ href: to, fontSize, ...props }: IconLinkProps) => { interface IconWrapperProps extends IconLinkProps {
Icon: typeof SvgIcon
}
const IconWrapper = ({ index, href: to, fontSize, Icon, ...props }: IconWrapperProps) => {
if (typeof index === 'undefined') {
return ( return (
<IconButton aria-label="Email-button" onClick={() => window.open(to, '_blank')} {...props}> <IconButton onClick={() => window.open(to, '_blank')} {...props}>
<Description fontSize={fontSize} /> <Icon fontSize={fontSize} />
</IconButton>
)
}
return (
<IconButton onClick={() => window.open(to, '_blank')} {...props}>
<Badge badgeContent={index}>
<Icon fontSize={fontSize} />
</Badge>
</IconButton> </IconButton>
) )
} }
export const EmailIconLink = ({ href: to, fontSize, ...props }: IconLinkProps) => { export const DescriptionIconLink = (props: IconLinkProps) => <IconWrapper aria-label="Email-button" Icon={Description} {...props} />
return ( export const EmailIconLink = (props: IconLinkProps) => <IconWrapper aria-label="Email-button" Icon={Email} {...props} />
<IconButton aria-label="Email-button" onClick={() => window.open(to, '_blank')} {...props}> export const GitHubIconLink = (props: IconLinkProps) => <IconWrapper aria-label="GitHub-button" Icon={GitHub} {...props} />
<Email fontSize={fontSize} /> export const LinkedInIconLink = (props: IconLinkProps) => <IconWrapper aria-label="LinkedIn-button" Icon={LinkedIn} {...props} />
</IconButton> export const AcademyIconLink = (props: IconLinkProps) => <IconWrapper aria-label="Academy-button" Icon={School} {...props} />
) export const VideoIconLink = (props: IconLinkProps) => <IconWrapper aria-label="Video-button" Icon={OndemandVideo} {...props} />
}
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>
)
}