import React from "react"
import { Content } from "@onegeo/gatsby-theme-onegeo"
import { Menu, MenuMobile } from "@onegeo/gatsby-theme-onegeo"
import { Link } from "gatsby"

const menu = () => {
    return (
        <Content>
            <div className="prose">
                <Link to="/doc/core">Retour</Link>

                <h1>Menu</h1>
                <h2>Props</h2>
                <div className="mockup-code">
                    <pre>
                        <code>
                            {`const menu = [
    {
      title: "Decouvrir",
    },
    {
      title: "Actualités",
    },
    {
      title: "A propos",
    },
    {
      title: "Mentions légales",
    },
    {
      title: "Parents",
      subMenu: [
        {
          title: "sousmenu1",
        },
        {
          title: "sousmenu2",
        },
      ],
    },
  ];`}
                        </code>
                    </pre>
                </div>

                <h2>Example</h2>
            </div>
            <div className="mt-5">
                <h3 className="underline underline-offset-1">Menu classique</h3>
                <div className="flex gap-6 m-4">
                    <Menu />
                </div>
            </div>

            <div>
                <h3 className="underline underline-offset-1">Menu mobile</h3>
                <div className="flex gap-6 m-4">
                    <MenuMobile />
                </div>
            </div>
        </Content>
    )
}

export default menu