import React from 'react'
import PropTypes from 'prop-types'
import { graphql, Link } from 'gatsby'
import Image from '../components/atoms/Image'
import Page from '../templates/Page'
import styles from './photos.module.scss'
const page = {
frontmatter: {
title: 'Photos',
description: 'Personal photos of designer & developer Matthias Kretschmann.'
}
}
const Photos = ({ data, location }) => {
const edges = data.photos.edges
const PhotoThumbs = edges.map(({ node }) => {
const { title, image } = node.frontmatter
const { slug } = node.fields
return (
{image && (
)}
)
})
return (
{PhotoThumbs}
)
}
Photos.propTypes = {
location: PropTypes.object.isRequired,
data: PropTypes.object
}
export default Photos
export const photosQuery = graphql`
query {
photos: allMarkdownRemark(
filter: { frontmatter: { type: { eq: "photo" } } }
sort: { order: DESC, fields: [fields___date] }
) {
edges {
node {
id
frontmatter {
title
type
image {
childImageSharp {
fluid(
maxWidth: 400
maxHeight: 400
quality: 85
cropFocus: CENTER
) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
fields {
slug
}
}
}
}
}
`