Skip to content
Snippets Groups Projects
carousel.tsx 1.48 KiB
Newer Older
Toavina's avatar
Toavina committed
import React from "react"
Tojo Andrianomentsoaniaina's avatar
Tojo Andrianomentsoaniaina committed
import {  } from "gatsby"
import { Content,Link, Carousel } from "@onegeo/gatsby-theme-onegeo"


const carousel = () => {
Toavina's avatar
Toavina committed
    const dataImage = [
        {
Tojo's avatar
Tojo committed
            src: "https://placeimg.com/800/200/arch",
Toavina's avatar
Toavina committed
        },
        {
Tojo's avatar
Tojo committed
            src: "https://placeimg.com/800/200/arch",
Toavina's avatar
Toavina committed
        },
        {
Tojo's avatar
Tojo committed
            src: "https://placeimg.com/800/200/arch",
Toavina's avatar
Toavina committed
        },
        {
Tojo's avatar
Tojo committed
            src: "https://placeimg.com/800/200/arch",
Toavina's avatar
Toavina committed
        },
    ]
    return (
        <Content>
            <div className="prose">
                <Link to="/doc/core">Retour</Link>
Toavina's avatar
Toavina committed
                <h1>Carousel</h1>
                <h2>Props</h2>
                <div className="mockup-code">
                    <pre>
                        <code>
                            {`
interface DataImage {
    src: string;
  }
  
  interface Props {
    images: Array<DataImage>;
    delay?: number;
  }
  
  const dataImage = [
    {
      src: logo1,
    },
    {
      src: logo2,
    },
    {
      src: logo3,
    },
    {
      src: logo4,
    },
    {
      src: logo5,
    },
];
`}
Toavina's avatar
Toavina committed
                        </code>
                    </pre>
                </div>
Toavina's avatar
Toavina committed
                <h2>Example</h2>
            </div>
Tojo's avatar
Tojo committed
            <div className="">
                <Carousel images={dataImage}  delay={3000} />
            </div>
            <div className="mt-5">
                <Carousel images={dataImage}  delay={6000} />
            </div>

Toavina's avatar
Toavina committed
        </Content>
    )
}
Toavina's avatar
Toavina committed
export default carousel