Added more types

components/blocks/carousel.tsx

@@ -1,10 +1,16 @@
 import * as React from "react";
 import { Section } from "../util/section";
-import { PageBlocksCarousel } from "../../tina/__generated__/types";
+import { PageBlocks, PageBlocksCarousel, PageBlocksMutation } from "../../tina/__generated__/types";
 import { Anchoring, anchoringSchema } from "../util/anchoring";
 import { Template } from "tinacms";
+import { PageBlockFunction } from "../blocks-renderer";
 
-export const Carousel = ({ data }: { data: PageBlocksCarousel }) => {
+/**
+ * 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] })` } }>

components/blocks/content.tsx

@@ -3,10 +3,11 @@ import { Container } from "../util/container";
 import { Section } from "../util/section";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 import type { Template, TinaTemplate } from "tinacms";
-import { PageBlocksContent } from "../../tina/__generated__/types";
+import { PageBlocksCarousel, PageBlocksContent } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
+import { PageBlockFunction } from "../blocks-renderer";
 
-export const Content = ({ data }: { data: PageBlocksContent }) => {
+export const Content: PageBlockFunction<PageBlocksContent> = ({ data }) => {
     return (
         <Section color={ data.color }>
             <Container

components/blocks/features.tsx

@@ -8,6 +8,7 @@ import {
 } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
 import { Template } from "tinacms";
+import { PageBlockFunction } from "../blocks-renderer";
 
 export const Feature = ({
     featuresColor,
@@ -49,7 +50,7 @@ export const Feature = ({
     );
 };
 
-export const Features = ({ data }: { data: PageBlocksFeatures }) => {
+export const Features: PageBlockFunction<PageBlocksFeatures> = ({ data }) => {
     return (
         <Section color={ data.color }>
             <Container

components/blocks/hero.tsx

@@ -3,11 +3,12 @@ import { Actions } from "../util/actions";
 import { Container } from "../util/container";
 import { Section } from "../util/section";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
-import type { Template, TinaTemplate } from "tinacms";
+import type { Template } from "tinacms";
 import { PageBlocksHero } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
+import { PageBlockFunction } from "../blocks-renderer";
 
-export const Hero = ({ data }: { data: PageBlocksHero }) => {
+export const Hero: PageBlockFunction<PageBlocksHero> = ({ data }) => {
     const headlineColorClasses = {
         blue: "from-blue-400 to-blue-600",
         teal: "from-teal-400 to-teal-600",

components/blocks/testimonial.tsx

@@ -4,8 +4,9 @@ import { Section } from "../util/section";
 import type { Template } from "tinacms";
 import { PageBlocksTestimonial } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
+import { PageBlockFunction } from "../blocks-renderer";
 
-export const Testimonial = ({ data }: { data: PageBlocksTestimonial }) => {
+export const Testimonial: PageBlockFunction<PageBlocksTestimonial> = ({ data }) => {
     return (
         <Section color={ data.color }>
             <Container size="large">