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

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>
                            {`
                            interface IMenu {
                                classname?: string
                                name?: string
                            }

                            query MyQuery {
                                directus {
                                  menus(status: {_eq: "published"}) {
                                    children {
                                      url
                                      name
                                      page {
                                        title
                                        slug
                                      }
                                      children {
                                        url
                                        name
                                        page {
                                          title
                                          slug
                                        }
                                        children {
                                          id
                                          name
                                          url
                                        }
                                      }
                                    }
                                  }
                                }
                            }
                            
    `}
                        </code>
                    </pre>
                </div>

                <h2>Example</h2>
            </div>
            <div className="mt-5">
                <h3 className="underline underline-offset-1">Menu Header</h3>
                <div className="flex gap-6 m-4">
                    <Menu name="header" className="menu menu-horizontal p-0" />
                </div>
            </div>

            <div>
                <h3 className="underline underline-offset-1">Menu mobile</h3>
                <div className="flex gap-6 m-4">
                    <Menu name='Header' className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52 z-50"/>
                </div>
            </div>

            <div>
                <h3 className="underline underline-offset-1">Menu Footer</h3>
                <div className="flex gap-6 m-4">
                    <Menu name='Footer' className="menu menu-horizontal p-0"/>
                </div>
            </div>
        </Content>
    )
}

export default menu