127 lines
2.8 KiB
JavaScript
127 lines
2.8 KiB
JavaScript
import React from "react"
|
|
import classnames from "classnames"
|
|
|
|
import { makeStyles } from "@material-ui/core/styles"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardMedia,
|
|
Typography,
|
|
Button,
|
|
Chip,
|
|
Link,
|
|
} from "@material-ui/core"
|
|
|
|
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%",
|
|
height: 0,
|
|
paddingTop: "56.25%",
|
|
},
|
|
},
|
|
}))
|
|
|
|
function Project({ reverse, title, description, technologies, github, live }) {
|
|
const classes = useStyles()
|
|
return (
|
|
<Card
|
|
className={classnames(classes.card, {
|
|
reverse,
|
|
})}
|
|
>
|
|
<CardMedia
|
|
image="https://material-ui.com/static/images/cards/live-from-space.jpg"
|
|
title="Live from space album cover"
|
|
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">
|
|
Wersja online
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
Project.defaultProps = {
|
|
reverse: false,
|
|
}
|
|
|
|
export default Project
|