import React, { ReactElement } from "react"
import {  } from "gatsby"

import { Content,Link ,News } from "@onegeo/gatsby-theme-onegeo"

function news(): ReactElement {
    return (
        <Content>
            <div className="prose">
                <Link to="/doc">Retour</Link>

                <h1>News</h1>
                <h2>Props</h2>
                <div className="mockup-code">
                    <pre>
                        <code>
                            {`
interface INews {
  title?: string;
  action?: {
    name?: string;
    url?: string;
    classname?: string;
  };
  anime?: boolean;
}

GraphQL query

  query {
    directus {
      news(
        limit: 3
        filter: { status: { _eq: "published" } }
        sort: "-date_published"
      ) {
        id
        content
        title
        date_published
        image {
          id
          imageFile {
            childImageSharp {
              gatsbyImageData
            }
          }
        }
      }
    }
  }
`}
                        </code>
                    </pre>
                </div>

                <h2>Example</h2>
            </div>
            <News
                title="Actualités"
                action={{
                    name: "Plus d'actualités",
                    url: "#",
                }}
            />
        </Content>
    )
}

export default news