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

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

                <h1>Iframe</h1>
                <h2>Props</h2>
                <div className="mockup-code">
                    <pre>
                        <code>
                            {`
interface IFrame {
    url?: string,
    className?: string
    size?: string
}
`}
                        </code>
                    </pre>
                </div>

                <h2>Example</h2>
            </div>
            <div >
                <h3>Taille xs</h3>
                <Iframe 
                    size="xs"
                    className = "w-1/3"
                    url= "http://www.openstreetmap.org/export/embed.html?bbox=79.84942674636841%2C6.899900944350287%2C79.85650777816772%2C6.90436374803887&amp;layers=ND"
                />
            </div>
            <div className="mt-4">
                <h3>Taille base</h3>
                <Iframe 
                    size="base"
                    className = "w-2/3"
                    url= "http://www.openstreetmap.org/export/embed.html?bbox=79.84942674636841%2C6.899900944350287%2C79.85650777816772%2C6.90436374803887&amp;layers=ND"
                />
            </div>
            <div className="mt-4">
                <h3>Taille xl</h3>
                <Iframe 
                    size="xl"
                    url= "http://www.openstreetmap.org/export/embed.html?bbox=79.84942674636841%2C6.899900944350287%2C79.85650777816772%2C6.90436374803887&amp;layers=ND"
                />
            </div>
        </Content>
    )
}

export default map