{"size": 1654, "ext": "js", "max_stars_repo_path": "src/pages/categories.js", "max_stars_repo_name": "sidskaka/FullStackProjectM1", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/pages/categories.js", "max_issues_repo_name": "sidskaka/FullStackProjectM1", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/pages/categories.js", "max_forks_repo_name": "sidskaka/FullStackProjectM1", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 28.5172413793, "max_line_length": 82, "alphanum_fraction": 0.4425634825}

import React from 'react'
import { graphql } from "gatsby"
import '../style/style.css'

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

const categories = ({ data }) => {
    console.log(data.allMarkdownRemark.nodes)
    return (
        <Layout>  
            <SEO title="Home" />      
            <div className="categories__grid">
                {
                    data.allMarkdownRemark.nodes.map(({ frontmatter }, index) => (
                        <div className="product__item" key={index}>
                            <h2>
                                { frontmatter.title }
                            </h2>
                            <div className="product__description">
                                { frontmatter.description }
                            </div>
                        </div>
                    ))
                }

                <h4>
                    <a className="lien-retour" href="/">
                        Retour à l'accueil
                    </a>
                </h4>
                <Button variant="success">Button teste bootstrap</Button>
            </div>
        </Layout>
    )
}

export const query = graphql`
    query categories {
        allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/categories/"}}) {
            nodes {
                frontmatter {
                    description
                    title
                    path
                }
            }
        }
    }
`

export default categories
