feature.tsx

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

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

                <h1>Feature</h1>
                <h2>Props</h2>
                <div className="mockup-code">
                    <pre>
                        <code>
                            {`
interface FeatureProps {
title?: string;
content?: string;
image?: string | IGatsbyImageData;
mapid?: number;
layout?: 'left' | 'right';
backgroundImage?: string;
action?: {
  name?: string;
  url?: string;
  className?: string;
};
custom?: JSX.Element;
}`}
                        </code>
                    </pre>
                </div>

                <h2>Example</h2>
            </div>
            <div className="mt-10">
                <h1 className="text-2xl font-semibold p-4">Custom component</h1>
                <Feature
                    title="Action"
                    content="Action description for the Button"
                    layout="left"
                    custom={<div>Custom component</div>}
                    action={{
                        url: "#",
                        name: "Action",
                    }}
                />
            </div>
            <div className="mt-10">
                <h1 className="text-2xl font-semibold p-4">Image</h1>
                <Feature
                    title="Action"
                    content="Action description for the Button"
                    layout="right"
                    image="https://fakeimg.pl/480x480/"
                    action={{
                        url: "#",
                        name: "Action",
                    }}
                />
            </div>
            <div className="mt-10">
                <h1 className="text-2xl font-semibold p-4">Text only</h1>
                <Feature
                    title="Action"
                    content="Action description for the Button"
                    action={{
                        url: "#",
                        name: "Action",
                    }}
                />
            </div>
            <div className="mt-10">
                <h1 className="text-2xl font-semibold p-4">Map</h1>
                <Feature
                    title="Action"
                    content="Action description for the Button"
                    action={{
                        url: "#",
                        name: "Action",
                    }}
                    layout="left"
                    mapid={109}
                />
            </div>
        </Content>
    )
}

export default feature