94 lines
2.0 KiB
TypeScript
94 lines
2.0 KiB
TypeScript
import {
|
|
Button,
|
|
createStyles,
|
|
Grid,
|
|
makeStyles,
|
|
Theme,
|
|
Typography,
|
|
} from '@material-ui/core'
|
|
import { graphql, Link } from 'gatsby'
|
|
import React from 'react'
|
|
import Hero from '../components/hero'
|
|
import ProjectCard from '../components/ProjectCard'
|
|
import SEO from '../components/seo'
|
|
import { Category, Project } from '../types'
|
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
createStyles({
|
|
wrapper: {
|
|
paddingLeft: theme.spacing(2),
|
|
paddingRight: theme.spacing(2),
|
|
},
|
|
backButton: {
|
|
textAlign: 'center',
|
|
margin: theme.spacing(4),
|
|
},
|
|
}),
|
|
)
|
|
|
|
type Props = {
|
|
data: {
|
|
appCategory: Category
|
|
allAppProject: {
|
|
edges: {
|
|
node: Project
|
|
}[]
|
|
}
|
|
}
|
|
}
|
|
|
|
const CategoryTemplate: React.FC<Props> = props => {
|
|
const classes = useStyles()
|
|
|
|
const category = props.data.appCategory
|
|
const projectEdges = props.data.allAppProject.edges
|
|
const projects: Project[] = projectEdges.map(n => n.node)
|
|
|
|
return (
|
|
<>
|
|
<SEO title="Home" />
|
|
<Hero
|
|
title={`Category: ${category.title}`}
|
|
description={category.description || ''}
|
|
></Hero>
|
|
<Typography className={classes.backButton}>
|
|
<Button component={Link} to="/" variant="contained">
|
|
Back to category list
|
|
</Button>
|
|
</Typography>
|
|
<div className={classes.wrapper}>
|
|
<Grid container spacing={2}>
|
|
{projects.map(project => {
|
|
return (
|
|
<Grid item xs={12} sm={6} key={project.id}>
|
|
<ProjectCard project={project} />
|
|
</Grid>
|
|
)
|
|
})}
|
|
</Grid>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default CategoryTemplate
|
|
|
|
export const pageQuery = graphql`
|
|
query CategoryPageQuery($slug: String!) {
|
|
appCategory(slug: { eq: $slug }) {
|
|
id
|
|
description
|
|
slug
|
|
title
|
|
}
|
|
|
|
allAppProject(filter: { category_ids: { eq: $slug } }) {
|
|
edges {
|
|
node {
|
|
...ProjectCardFields
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`
|