Skip to content
Snippets Groups Projects
Commit 39dcf7e4 authored by Tojo Andrianomentsoaniaina's avatar Tojo Andrianomentsoaniaina Committed by Julien MARGAIL
Browse files

Feat/marquee

parent 9ddd6007
No related branches found
No related tags found
No related merge requests found
......@@ -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
......
......@@ -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"
......@@ -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": {
......
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
.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/icons/back-arrow-3095.png

825 B

src/icons/right-arrow-3094.png

810 B

......@@ -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>
)
......
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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment