Frames

Untitled

0
1import React, { memo } from 'react'
2import { Link, graphql } from 'gatsby'
3import Container from '@material-ui/core/Container'
4import Typography from '@material-ui/core/Typography'
5import Grid from '@material-ui/core/Grid'
6import MaterialLink from '@material-ui/core/Link'
7
8import GeneralLayout from '../layouts/general'
9import BlogItem from '../components/BlogItem'
10
11const TagsList = memo(({ pageContext, data }) => {
12 const { tag } = pageContext
13 const { nodes } = data.allMdx
14 const tagHeader = `Todos los post de "${tag}"`
15
16 return (
17 <GeneralLayout>
18 <Container maxWidth="md">
19 <Typography gutterBottom component="h1" variant="h3">
20 {tagHeader}
21 </Typography>
22 <Grid container spacing={2} component="ul">
23 {nodes.map(entry => (
24 <Grid key={entry.id} item sm={12} component="li">
25 <BlogItem item={entry} />
26 </Grid>
27 ))}
28 </Grid>
29 <div className="MuiTypography-alignRight">
30 <MaterialLink align="right" component={Link} to="/tags">
31 Ver todos los tags
32 </MaterialLink>
33 </div>
34 </Container>
35 </GeneralLayout>
36 )
37})
38
39TagsList.displayName = 'TagsList'
40export default TagsList
41
42export const pageQuery = graphql`
43 query($tag: String) {
44 allMdx(
45 limit: 2000
46 sort: { fields: [frontmatter___date], order: DESC }
47 filter: {
48 frontmatter: { tags: { in: [$tag] }, status: { eq: "published" } }
49 }
50 ) {
51 nodes {
52 id
53 frontmatter {
54 title
55 tags
56 date(formatString: "DD [de] MMMM YYYY", locale: "es")
57 banner {
58 childImageSharp {
59 fluid(
60 maxWidth: 960
61 traceSVG: { color: "#f04173", background: "#535c81" }
62 ) {
63 ...GatsbyImageSharpFluid_withWebp_tracedSVG
64 }
65 }
66 }
67 }
68 excerpt(pruneLength: 300)
69 fields {
70 slug
71 }
72 }
73 }
74 }
75`
76