component text

index.d.ts

@@ -237,9 +237,9 @@ interface INews {
 export function News(props: INews): JSX.Element
 
 interface IFrame {
-    url?: string,
+    url?: string
     className?: string
-    size?:string
+    size?: string
 }
 
 export function Iframe(props: IFrame): JSX.Element
@@ -264,4 +264,16 @@ interface IMaps {
 }
 export function Maps(props: IMaps): JSX.Element
 
+interface IText {
+    title?: string
+    content?: string
+    className?: string
+    action?: {
+        name?: string
+        url?: string
+        className?: string
+    }
+}
+export function Text(props: IText): JSX.Element
+
 declare module "@onegeo/gatsby-theme-onegeo"

index.js

@@ -46,7 +46,7 @@ export { default as Header } from "./src/components/Header"
 export { default as Section } from "./src/components/Section"
 
 // Data components
-export { default as Data } from  "./src/components/Data"
+export { default as Data } from "./src/components/Data"
 
 // Section components
 export { default as Sections } from "./src/components/Sections"
@@ -58,3 +58,6 @@ export { default as Iframe } from "./src/components/core/Iframe"
 
 // Marquee components
 export { default as Marquee } from "./src/components/core/Marquee"
+
+// Text component
+export { default as Text } from "./src/components/Text"

src/components/Text.tsx

+import React from "react"
+import Button from "./core/Button"
+
+interface IText {
+    title?: string
+    content?: string
+    className?: string
+    action?: {
+        name?: string
+        url?: string
+        className?: string
+    }
+}
+
+const Text = (props: IText) => {
+    const { title, content, className = "", action } = props
+    return (
+        <div className={className}>
+            {title && <h2 className="font-extrabold sm:text-4xl">{title}</h2>}
+            {content && (
+                <p className="text-xl leading-8 pt-10 text-justify">
+                    {content}
+                </p>
+            )}
+            {action && (
+                <Button {...action} className={`mt-10 ${action.className}`} />
+            )}
+        </div>
+    )
+}
+
+export default Text

src/pages-doc/doc/index.tsx

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

src/pages-doc/doc/text.tsx

+import React, { ReactElement } from "react"
+import { Content, Link, Text } from "@onegeo/gatsby-theme-onegeo"
+
+function feature(): ReactElement {
+    return (
+        <Content>
+            <div className="prose">
+                <Link to="/doc">Retour</Link>
+
+                <h1>Text</h1>
+                <h2>Props</h2>
+                <div className="mockup-code">
+                    <pre>
+                        <code>
+                            {`
+interface IText {
+    title?: string
+    content?: string
+    className?: string
+    action?: {
+        name?: string
+        url?: string
+        className?: string
+    }
+}`}
+                        </code>
+                    </pre>
+                </div>
+
+                <h2>Example</h2>
+            </div>
+            <div className="mt-10">
+                <Text
+                    title="Action"
+                    content="Action description for the Button"
+                    action={{
+                        url: "#",
+                        name: "Action",
+                    }}
+                />
+            </div>
+        </Content>
+    )
+}
+
+export default feature