vignette

index.d.ts

@@ -110,6 +110,11 @@ interface Istats {
     descriptionColor?: string
 }
 export function Stats(props: Istats): JSX.Element
+interface Idata {
+    layout?: "row" | "col" | "grid"
+    size?: "xs" | "base" | "xl"
+}
+export function Data(props: Idata): JSX.Element
 
 interface DataImage {
     src: string

index.js

@@ -48,6 +48,9 @@ export { default as Header } from "./src/components/Header"
 // Section components
 export { default as Section } from "./src/components/Section"
 
+// Data components
+export { default as Data } from  "./src/components/Data"
+
 // Section components
 export { default as Sections } from "./src/components/Sections"
 

src/components/Data.tsx

+import React, { useState, useEffect } from "react"
+import CardList from "./core/CardList"
+
+interface Idata {
+    layout?: "row" | "col" | "grid"
+    size?: "xs" | "base" | "xl"
+}
+
+const Data = (props: Idata) => {
+    const { layout = "row", size = "xs" } = props
+    const [data, setData] = useState<any[]>([])
+
+    useEffect(() => {
+        setData([
+            {
+                name: "Action",
+                description: "Action description for the Button",
+                size: "xs",
+            },
+            {
+                name: "Action",
+                description: "Action description for the Button",
+                size: "xs",
+            },
+            {
+                name: "Action",
+                description: "Action description for the Button",
+                size: "xs",
+            },
+        ])
+        // fetch(`${MAPS_URL}&start=0&limit=${limit}`)
+        //     .then((res) => {
+        //         if (!res.ok) {
+        //             throw new Error(res.statusText)
+        //         }
+
+        //         return res.json()
+        //     })
+        //     .then((response) => {
+        //         const results = response.results
+        //         if (results.length) {
+        //             setData(results)
+        //         }
+        //     })
+        //     .catch((e) => {
+        //         console.log(e)
+        //     })
+    }, [])
+
+    if (!data.length) return null
+
+    const dataCards = data.map((data: any) => {
+        return {
+            name: data.name,
+            description: data.description,
+            // image: `/geoportal/${data.thumbnail}`,
+            size: size,
+            // url: `/geoportal/#/context/Admin/${data.id}`,
+        }
+    })
+    return (
+        <div>
+            <CardList cards={dataCards} layout={layout} />
+        </div>
+    )
+}
+
+export default Data

src/pages-doc/doc/data.tsx

+import React, { ReactElement } from "react"
+
+import { Content, Link,  Data } from "@onegeo/gatsby-theme-onegeo"
+
+function news(): ReactElement {
+
+    return (
+        <Content>
+            <div className="prose">
+                <Link to="/doc">Retour</Link>
+
+                <h1>Data</h1>
+                <h2>Props</h2>
+                <div className="mockup-code">
+                    <pre>
+                        <code>
+                            {`
+ interface Idata {
+    layout?: "row" | "col" | "grid"
+    size?: "xs" | "base" | "xl"
+ }
+`}
+                        </code>
+                    </pre>
+                </div>
+
+                <h2>Example</h2>
+            </div>
+            <div className=" max-w-[500px]">
+                <Data layout = "row" size = "xs"/>
+            </div>
+        </Content>
+    )
+}
+
+export default news
+
+

src/pages-doc/doc/index.tsx

@@ -34,6 +34,8 @@ function index(): ReactElement {
                 <br></br>
                 <Link to="/doc/sections">Sections</Link>
                 <br></br>
+                <Link to="/doc/data">Data</Link>
+                <br></br>
                 <Link to="/doc/maps">Maps</Link>
             </div>
         </Content>