133 lines
3.0 KiB
JavaScript
133 lines
3.0 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
import {
|
|
Button,
|
|
Card,
|
|
CardContent,
|
|
Chip,
|
|
Link,
|
|
Typography,
|
|
} from '@material-ui/core';
|
|
import BackgroundImage from 'gatsby-background-image';
|
|
|
|
function Project({ title, description, technologies, git, live, fluid }) {
|
|
const classes = useStyles();
|
|
return (
|
|
<Card className={classes.card}>
|
|
{
|
|
<BackgroundImage
|
|
fluid={fluid}
|
|
title={title}
|
|
className={classes.cover}
|
|
/>
|
|
}
|
|
<CardContent className={classes.cardContent}>
|
|
<div className={classes.contentContainer}>
|
|
<Typography variant="h3" gutterBottom className={classes.title}>
|
|
{title}
|
|
</Typography>
|
|
<Typography>{description}</Typography>
|
|
</div>
|
|
<div className={classes.divider} />
|
|
<div className={classes.technologies}>
|
|
{technologies.map(technology => {
|
|
return (
|
|
<Chip key={technology} label={technology} color="secondary" />
|
|
);
|
|
})}
|
|
</div>
|
|
<div className={classes.buttons}>
|
|
{git && (
|
|
<Link underline="none" href={git}>
|
|
<Button variant="contained" color="secondary">
|
|
Git
|
|
</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',
|
|
flexDirection: 'column',
|
|
height: '100%',
|
|
},
|
|
cardContent: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
height: '100%',
|
|
},
|
|
divider: {
|
|
flex: 1,
|
|
},
|
|
title: {
|
|
overflowWrap: 'break-word',
|
|
wordWrap: 'break-word',
|
|
'-ms-word-break': 'break-all',
|
|
wordBreak: 'break-word',
|
|
'-ms-hyphens': 'auto',
|
|
'-moz-hyphens': 'auto',
|
|
'-webkit-hyphens': 'auto',
|
|
hyphens: 'auto',
|
|
},
|
|
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: '100%',
|
|
paddingTop: '66.6666%',
|
|
},
|
|
}));
|
|
|
|
Project.defaultProps = {
|
|
title: '',
|
|
description: '',
|
|
technologies: [],
|
|
github: '',
|
|
live: '',
|
|
};
|
|
|
|
Project.propTypes = {
|
|
title: PropTypes.string.isRequired,
|
|
description: PropTypes.string.isRequired,
|
|
technologies: PropTypes.arrayOf(PropTypes.string).isRequired,
|
|
github: PropTypes.string.isRequired,
|
|
live: PropTypes.string.isRequired,
|
|
};
|
|
|
|
export default Project;
|