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;
|