import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { graphql } from 'gatsby'
import FullWidth from '../components/atoms/FullWidth'
import ProjectImage from '../components/atoms/ProjectImage'
import ProjectTechstack from '../components/molecules/ProjectTechstack'
import ProjectLinks from '../components/molecules/ProjectLinks'
import ProjectNav from '../components/molecules/ProjectNav'
import SEO from '../components/atoms/SEO'
import styles from './Project.module.scss'
class ProjectMeta extends PureComponent {
static propTypes = {
links: PropTypes.array,
techstack: PropTypes.array
}
render() {
const { links, techstack } = this.props
return (
)
}
}
class ProjectImages extends PureComponent {
static propTypes = {
projectImages: PropTypes.array,
title: PropTypes.string
}
render() {
return (
{this.props.projectImages.map(({ node }) => (
))}
)
}
}
export default class Project extends PureComponent {
static propTypes = {
data: PropTypes.object.isRequired,
location: PropTypes.object.isRequired
}
render() {
const { data } = this.props
const project = data.projectsYaml
const projectImages = data.projectImages.edges
const descriptionHtml = data.projectsYaml.fields.descriptionHtml
const { title, links, techstack } = project
return (
<>
>
)
}
}
export const projectQuery = graphql`
query($slug: String!) {
projectsYaml(slug: { eq: $slug }) {
title
slug
fields {
descriptionHtml
excerpt
}
links {
title
url
type
}
techstack
img {
childImageSharp {
twitterImage: resize(width: 980) {
src
}
}
}
}
projectImages: allImageSharp(
filter: { fluid: { originalName: { regex: $slug } } }
sort: { fields: [fluid___originalName], order: ASC }
) {
edges {
node {
id
...ProjectImageFluid
}
}
}
}
`