Skip to content
Snippets Groups Projects
Commit f996f617 authored by Tojo Andrianomentsoaniaina's avatar Tojo Andrianomentsoaniaina Committed by Julien MARGAIL
Browse files

Feat/iframe

parent 1ef0f370
No related branches found
No related tags found
No related merge requests found
......@@ -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
}
......
......@@ -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"
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
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
......@@ -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>
)
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment