67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
import * as React from "react";
|
|
import { Section } from "../util/section";
|
|
import { PageBlocks, PageBlocksCarousel, PageBlocksMutation } from "../../tina/__generated__/types";
|
|
import { Anchoring, anchoringSchema } from "../util/anchoring";
|
|
import { Template } from "tinacms";
|
|
import { PageBlockFunction } from "../blocks-renderer";
|
|
import { Carousel as ReactCarousel } from "react-responsive-carousel";
|
|
import "react-responsive-carousel/lib/styles/carousel.min.css";
|
|
|
|
/**
|
|
* Section carousel used for the main page but can be used everywhere
|
|
* @param {PageBlocksCarousel} data The data from the carousel
|
|
* @constructor
|
|
*/
|
|
export const Carousel: PageBlockFunction<PageBlocksCarousel> = ({ data }) => {
|
|
return (
|
|
<Section>
|
|
<div className="w-[100%]">
|
|
<ReactCarousel
|
|
showArrows={ false }
|
|
showStatus={ false }
|
|
showThumbs={ false }
|
|
showIndicators={ false }
|
|
stopOnHover={ false }
|
|
swipeable={ false }
|
|
useKeyboardArrows={ false }
|
|
autoPlay={ true }
|
|
infiniteLoop={ true }
|
|
dynamicHeight={ false }
|
|
interval={ data.speed || 3000 }>
|
|
{ data?.images?.map(imageUrl => (
|
|
<div key={ imageUrl } className="carousel-image" style={ { backgroundImage: `url(${ imageUrl })` } }/>
|
|
)) }
|
|
</ReactCarousel>
|
|
|
|
{ data?.link?.enabled && <Anchoring { ...data.link }/> }
|
|
</div>
|
|
</Section>);
|
|
};
|
|
|
|
const defaultCarousel = "Here's Another Feature";
|
|
|
|
export const carouselBlockSchema: Template = {
|
|
name: "carousel",
|
|
label: "Carousel",
|
|
ui: {
|
|
previewSrc: "/blocks/features.png",
|
|
defaultItem: [defaultCarousel, defaultCarousel, defaultCarousel]
|
|
},
|
|
fields: [
|
|
{
|
|
type: "number",
|
|
label: "Vitesse de défilement en millisecondes",
|
|
name: "speed"
|
|
},
|
|
{
|
|
type: "image",
|
|
label: "Images du carousel",
|
|
name: "images",
|
|
list: true
|
|
},
|
|
{
|
|
...anchoringSchema
|
|
}
|
|
]
|
|
};
|