Feat/iframe

index.d.ts

@@ -230,6 +230,14 @@ interface INews {
 }
 export function News(props: INews): JSX.Element
 
+interface IFrame {
+    url?: string,
+    className?: string
+    size?:string
+}
+
+export function Iframe(props: IFrame): JSX.Element
+
 interface ISection {
     id: string
 }

index.js

@@ -56,3 +56,5 @@ export { default as Sections } from "./src/components/Sections"
 
 // Maps components
 export { default as Maps } from "./src/components/Maps"
+// Iframe components
+export { default as Iframe } from "./src/components/core/Iframe"

src/components/core/Iframe.tsx

+import React from "react"
+
+interface IFrame {
+    url?: string
+    className?: string
+    size?: string
+}
+
+const oClass = {
+    xs: {
+        className: " min-h-[250px] max-h-[250px] ",
+    },
+    base: {
+        className: " min-h-[350px] max-h-[350px] ",
+    },
+    xl: {
+        className: " min-h-[450px] max-h-[450px] ",
+    },
+}
+
+const Iframe = (props: IFrame) => {
+    const { url, className = "", size = "base" } = props
+    const oclass = oClass[size]
+
+    if (!url) return null
+    return (
+        <iframe
+            src={url}
+            className={"w-full " + oclass.className + className}
+        ></iframe>
+    )
+}
+
+export default Iframe

src/pages-doc/doc/core/iframe.tsx

+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

src/pages-doc/doc/core/index.tsx

@@ -27,6 +27,8 @@ function index(): ReactElement {
                 <Link to="/doc/core/menu">Menu</Link>
                 <br></br>
                 <Link to="/doc/core/image">Image</Link>
+                <br></br>
+                <Link to="/doc/core/iframe">Iframe</Link>
             </div>
         </Content>
     )