158 lines
3.4 KiB
JavaScript
158 lines
3.4 KiB
JavaScript
import React from "react"
|
|
import PropTypes from "prop-types"
|
|
import classnames from "classnames"
|
|
import notFound from "./not-found.jpg"
|
|
|
|
import { makeStyles } from "@material-ui/core/styles"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardMedia,
|
|
Typography,
|
|
Button,
|
|
Chip,
|
|
Link,
|
|
} from "@material-ui/core"
|
|
import BackgroundImage from "gatsby-background-image"
|
|
|
|
function Project({
|
|
reverse,
|
|
title,
|
|
description,
|
|
technologies,
|
|
github,
|
|
live,
|
|
img,
|
|
fluid,
|
|
}) {
|
|
const classes = useStyles()
|
|
return (
|
|
<Card
|
|
className={classnames(classes.card, {
|
|
reverse,
|
|
})}
|
|
>
|
|
{fluid ? (
|
|
<BackgroundImage
|
|
fluid={fluid}
|
|
title={title}
|
|
className={classes.cover}
|
|
/>
|
|
) : (
|
|
<CardMedia image={img} title={title} className={classes.cover} />
|
|
)}
|
|
<CardContent className={classes.cardContent}>
|
|
<div className={classes.contentContainer}>
|
|
<Typography variant="h3" gutterBottom>
|
|
{title}
|
|
</Typography>
|
|
<Typography>{description}</Typography>
|
|
</div>
|
|
<div className={classes.divider}></div>
|
|
<div className={classes.technologies}>
|
|
{technologies.map(technology => {
|
|
return (
|
|
<Chip key={technology} label={technology} color="secondary" />
|
|
)
|
|
})}
|
|
</div>
|
|
<div className={classes.buttons}>
|
|
{github && (
|
|
<Link underline="none" href={github}>
|
|
<Button variant="contained" color="secondary">
|
|
GitHub
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
{live && (
|
|
<Link underline="none" href={live}>
|
|
<Button variant="contained" color="secondary">
|
|
Online
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
card: {
|
|
display: "flex",
|
|
minHeight: "400px",
|
|
"&.reverse": {
|
|
flexDirection: "row-reverse",
|
|
[theme.breakpoints.down("sm")]: {
|
|
flexDirection: "column",
|
|
},
|
|
},
|
|
[theme.breakpoints.down("sm")]: {
|
|
flexDirection: "column",
|
|
},
|
|
},
|
|
cardContent: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
width: "45%",
|
|
[theme.breakpoints.down("sm")]: {
|
|
width: "100%",
|
|
},
|
|
},
|
|
divider: {
|
|
flex: 1,
|
|
},
|
|
contentContainer: {
|
|
marginBottom: theme.spacing(8),
|
|
},
|
|
technologies: {
|
|
marginBottom: theme.spacing(2),
|
|
"& > *:not(:last-child)": {
|
|
marginRight: theme.spacing(1),
|
|
},
|
|
"& > *": {
|
|
marginBottom: theme.spacing(1),
|
|
},
|
|
},
|
|
buttons: {
|
|
"& > *:not(:last-child)": {
|
|
marginRight: theme.spacing(1),
|
|
},
|
|
"& > *": {
|
|
marginBottom: theme.spacing(1),
|
|
[theme.breakpoints.down("xs")]: {
|
|
width: "100%",
|
|
},
|
|
},
|
|
},
|
|
cover: {
|
|
width: "55%",
|
|
[theme.breakpoints.down("sm")]: {
|
|
width: "100%",
|
|
paddingTop: "56.25%",
|
|
},
|
|
},
|
|
}))
|
|
|
|
Project.defaultProps = {
|
|
reverse: false,
|
|
title: "",
|
|
description: "",
|
|
technologies: [],
|
|
github: "",
|
|
live: "",
|
|
img: notFound,
|
|
}
|
|
|
|
Project.propTypes = {
|
|
reverse: PropTypes.bool.isRequired,
|
|
title: PropTypes.string.isRequired,
|
|
description: PropTypes.string.isRequired,
|
|
technologies: PropTypes.arrayOf(PropTypes.string).isRequired,
|
|
github: PropTypes.string.isRequired,
|
|
live: PropTypes.string.isRequired,
|
|
img: PropTypes.string.isRequired,
|
|
}
|
|
|
|
export default Project
|