diff --git a/assets/img/facebook.svg b/assets/img/facebook.svg new file mode 100644 index 0000000..205b3c4 --- /dev/null +++ b/assets/img/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/instagram.svg b/assets/img/instagram.svg new file mode 100644 index 0000000..b3cb954 --- /dev/null +++ b/assets/img/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/blocks/carousel.tsx b/components/blocks/carousel.tsx index c90dfa7..b88c21c 100644 --- a/components/blocks/carousel.tsx +++ b/components/blocks/carousel.tsx @@ -4,6 +4,8 @@ import { PageBlocks, PageBlocksCarousel, PageBlocksMutation } from "../../tina/_ 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 @@ -13,7 +15,24 @@ import { PageBlockFunction } from "../blocks-renderer"; export const Carousel: PageBlockFunction = ({ data }) => { return (
-
+
+ + { data?.images?.map(imageUrl => ( +
+ )) } + + { data?.link?.enabled && }
); @@ -29,6 +48,11 @@ export const carouselBlockSchema: Template = { defaultItem: [defaultCarousel, defaultCarousel, defaultCarousel] }, fields: [ + { + type: "number", + label: "Vitesse de défilement en millisecondes", + name: "speed" + }, { type: "image", label: "Images du carousel", diff --git a/components/layout/footer/footer.tsx b/components/layout/footer/footer.tsx index 47db620..ef76553 100644 --- a/components/layout/footer/footer.tsx +++ b/components/layout/footer/footer.tsx @@ -1,111 +1,36 @@ import React from "react"; -import Link from "next/link"; -import { FaFacebookF, FaGithub, FaTwitter } from "react-icons/fa"; -import { AiFillInstagram } from "react-icons/ai"; import { Container } from "../../util/container"; -import { RawRenderer } from "./rawRenderer"; import { ObjectField } from "@tinacms/schema-tools/dist/types"; +import facebookImage from "../../../assets/img/facebook.svg"; +import instagramImage from "../../../assets/img/instagram.svg"; export const Footer = ({ data, rawData }) => { - const socialIconClasses = "h-7 w-auto"; - const socialIconColorClasses = { - blue: "text-blue-500 dark:text-blue-400 hover:text-blue-300", - teal: "text-teal-500 dark:text-teal-400 hover:text-teal-300", - green: "text-green-500 dark:text-green-400 hover:text-green-300", - red: "text-red-500 dark:text-red-400 hover:text-red-300", - pink: "text-pink-500 dark:text-pink-400 hover:text-pink-300", - purple: "text-purple-500 dark:text-purple-400 hover:text-purple-300", - orange: "text-orange-500 dark:text-orange-400 hover:text-orange-300", - yellow: "text-yellow-500 dark:text-yellow-400 hover:text-yellow-300", - primary: "text-white opacity-80 hover:opacity-100" - }; - - const footerColor = { - default: - "text-gray-800 from-white to-gray-50 dark:from-gray-900 dark:to-gray-1000", - primary: { - blue: "text-white from-blue-500 to-blue-700", - teal: "text-white from-teal-500 to-teal-600", - green: "text-white from-green-500 to-green-600", - red: "text-white from-red-500 to-red-600", - pink: "text-white from-pink-500 to-pink-600", - purple: "text-white from-purple-500 to-purple-600", - orange: "text-white from-orange-500 to-orange-600", - yellow: "text-white from-yellow-500 to-yellow-600" - } - }; - - const footerColorCss = footerColor.default; - return ( -