43 lines
1.3 KiB
TypeScript
43 lines
1.3 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";
|
|
|
|
/**
|
|
* 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="carousel flex w-[100%] items-end justify-center" style={ { backgroundImage: `url(${ data?.images?.[0] })` } }>
|
|
{ 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: "image",
|
|
label: "Images du carousel",
|
|
name: "images",
|
|
list: true
|
|
},
|
|
{
|
|
...anchoringSchema
|
|
}
|
|
]
|
|
};
|