Feat/marquee

index.d.ts

@@ -126,6 +126,9 @@ interface ICarousel {
 }
 export function Carousel(props: ICarousel): JSX.Element
 
+interface Imarquee {}
+export function Marquee(props: Imarquee): JSX.Element
+
 interface SearchProps {}
 export function Search(props: SearchProps): JSX.Element
 

index.js

@@ -58,3 +58,6 @@ export { default as Sections } from "./src/components/Sections"
 export { default as Maps } from "./src/components/Maps"
 // Iframe components
 export { default as Iframe } from "./src/components/core/Iframe"
+
+// Marquee components
+export { default as Marquee } from "./src/components/core/Marquee"

package.json

@@ -20,6 +20,7 @@
         "react-cookie-consent": "^8.0.1",
         "react-instantsearch-dom": "^6.12.1",
         "react-leaflet": "^3.2.5",
+        "swiper": "^8.4.5",
         "typesense-instantsearch-adapter": "^1.2.2"
     },
     "devDependencies": {

src/components/core/Marquee.tsx

+import React from "react"
+import { Swiper, SwiperSlide } from "swiper/react"
+import { Navigation,  A11y } from 'swiper';
+
+
+// Import Swiper styles
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+import { graphql, useStaticQuery } from "gatsby";
+import { Logo } from "@onegeo/gatsby-theme-onegeo";
+import '../../css/marquee.css'
+
+const Marquee = () => {
+    const dataDirectus = useStaticQuery(graphql`
+        query getLogo {
+            directus {
+                partners {
+                    logo {
+                        id
+                    }
+                }
+            }
+        }
+    `)
+    const partners = dataDirectus.directus.partners
+
+    const url = "#"
+    return (
+        <>
+            <Swiper
+                slidesPerView={1}
+                spaceBetween={1}
+                navigation
+                loop={true}
+                slidesPerGroup={1}
+                loopFillGroupWithBlank={true}
+                breakpoints={{
+                    "@0.00": {
+                        slidesPerView: 1,
+                        spaceBetween: 4,
+                    },
+                    "@0.75": {
+                        slidesPerView: 2, 
+                        spaceBetween: 6,
+                    },
+                    "@1.00": {
+                        slidesPerView: 3,
+                        spaceBetween: 8,
+                    },
+                    "@1.50": {
+                        slidesPerView: 4,
+                        spaceBetween: 10,
+                    },
+                }}
+                modules={[Navigation, A11y]}
+                className="mySwiper"
+            >
+                {
+                    partners.map((item:any, key:number) => (
+                        <SwiperSlide className="slide flex items-center justify-center" key={key}>
+                            <div className="slide-content w-20 flex justify-center">
+                                <div className="user-image">
+                                    <Logo 
+                                        image={`${process.env.DIRECTUS_URL}assets/${item.logo.id}`} 
+                                        url={url} 
+                                        className="user-photo w-16" 
+                                        title=""
+                                    />
+                                </div>
+                            </div>
+                        </SwiperSlide>
+                    ))
+                }
+
+            </Swiper>
+        </>
+    )
+}
+
+export default Marquee

src/css/marquee.css

+.swiper-wrapper {
+    align-items: center;
+}
+
+.swiper-button-prev {
+    background-image: url("../icons/back-arrow-3095.png") !important;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.swiper-button-prev::after {
+    display: none;
+}
+
+
+.swiper-button-next {
+    background-image: url("../icons/right-arrow-3094.png") !important;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.swiper-button-next::after {
+    display: none;
+}
+
+.mySwiper {
+    width: 80%;
+}
\ No newline at end of file

src/pages-doc/doc/core/index.tsx

@@ -29,6 +29,8 @@ function index(): ReactElement {
                 <Link to="/doc/core/image">Image</Link>
                 <br></br>
                 <Link to="/doc/core/iframe">Iframe</Link>
+                <br></br>
+                <Link to="/doc/core/marquee">Marquee</Link>
             </div>
         </Content>
     )

src/pages-doc/doc/core/marquee.tsx

+import React from "react"
+import {  } from "gatsby"
+import { Content,Link, Marquee } from "@onegeo/gatsby-theme-onegeo"
+
+
+const marquee = () => {
+    return (
+        <Content>
+            <div className="prose">
+                <Link to="/doc/core">Retour</Link>
+
+                <h1>Marquee</h1>
+                <h2>Props</h2>
+                <div className="mockup-code">
+                    <pre>
+                        <code>
+                            {`
+ query getLogo {
+    directus {
+        partners {
+            logo {
+                id
+            }
+        }
+    }
+}
+`}
+                        </code>
+                    </pre>
+                </div>
+
+                <h2>Example</h2>
+            </div>
+            <Marquee />
+        </Content>
+    )
+}
+
+export default marquee