diff --git a/index.d.ts b/index.d.ts
index 58a2fd2ce36121ec11d5d5626729c546b9b00a1a..06457ba9587599a614eb4a4ccde44f4012749fc4 100644
--- a/index.d.ts
+++ b/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
diff --git a/index.js b/index.js
index 60723024264ca7eff4ecf742a27c017e0c05ee0a..6d156c481e49219f610f972d5928b87764b2e5ff 100644
--- a/index.js
+++ b/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"
diff --git a/package.json b/package.json
index 170b60479429f263a9b9aced540f97290875a4ca..1dab39dba3f0bf1a8d65b0f1a675e7b3e77f341b 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/core/Marquee.tsx b/src/components/core/Marquee.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4547c6748f2a85b16c70545af16d230e4091d974
--- /dev/null
+++ b/src/components/core/Marquee.tsx
@@ -0,0 +1,82 @@
+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
diff --git a/src/css/marquee.css b/src/css/marquee.css
new file mode 100644
index 0000000000000000000000000000000000000000..7bae0d9e8c97e068962e11ddb30e51e9e56fa636
--- /dev/null
+++ b/src/css/marquee.css
@@ -0,0 +1,28 @@
+.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
diff --git a/src/icons/back-arrow-3095.png b/src/icons/back-arrow-3095.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f0397a25a4246617648c2cbb9de2cee60b95047
Binary files /dev/null and b/src/icons/back-arrow-3095.png differ
diff --git a/src/icons/right-arrow-3094.png b/src/icons/right-arrow-3094.png
new file mode 100644
index 0000000000000000000000000000000000000000..c626f1b9ea97a4df0361d0dabcbaac81ecb98167
Binary files /dev/null and b/src/icons/right-arrow-3094.png differ
diff --git a/src/pages-doc/doc/core/index.tsx b/src/pages-doc/doc/core/index.tsx
index d400e97fb09c988df089da33261da3f6d8e8628f..3b6c23ab4984db120fe03615b8c81b630478b093 100644
--- a/src/pages-doc/doc/core/index.tsx
+++ b/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>
)
diff --git a/src/pages-doc/doc/core/marquee.tsx b/src/pages-doc/doc/core/marquee.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..901bfcbdb62c9e460de60fcceecbc78f4f3b9f19
--- /dev/null
+++ b/src/pages-doc/doc/core/marquee.tsx
@@ -0,0 +1,39 @@
+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