dwysokinski.me/src/features/HomePage/components/Contact.js

77 lines
1.9 KiB
JavaScript

import React from "react"
import { makeStyles } from "@material-ui/core/styles"
import { Typography, Container, Link } from "@material-ui/core"
import {
Email as EmailIcon,
GitHub as GitHubIcon,
Facebook as FacebookIcon,
} from "@material-ui/icons"
import Section from "@components/Section"
export const SECTION_ID = "contact"
function Contact() {
const classes = useStyles()
const linkProps = {
underline: "hover",
color: "secondary",
}
return (
<Section size="small" id={SECTION_ID}>
<Container maxWidth="md" className={classes.container}>
<div className={classes.urlContainer}>
<Typography variant="h6">
<EmailIcon fontSize="large" />
<Link href="mailto:dawidwysokinski000@gmail.com" {...linkProps}>
dawidwysokinski000@gmail.com
</Link>
</Typography>
<Typography variant="h6">
<GitHubIcon fontSize="large" />
<Link href="https://github.com/Kichiyaki" {...linkProps}>
Kichiyaki
</Link>
</Typography>
<Typography variant="h6">
<FacebookIcon fontSize="large" />
<Link
href="https://www.facebook.com/dawidwysokinski00"
{...linkProps}
>
/dawidwysokinski00
</Link>
</Typography>
</div>
</Container>
</Section>
)
}
const useStyles = makeStyles(theme => {
return {
container: {
display: "flex",
alignItems: "center",
justifyContent: "center",
},
urlContainer: {
"& > *:not(:last-child)": {
marginBottom: theme.spacing(0.5),
},
"& > *": {
display: "flex",
alignItems: "center",
wordBreak: "break-all",
"& > *:not(:last-child)": {
marginRight: theme.spacing(1),
},
},
},
}
})
export default Contact