Added more types

components/blocks-renderer.tsx

@@ -5,6 +5,7 @@ import { Hero } from "./blocks/hero";
 import { Testimonial } from "./blocks/testimonial";
 import { tinaField } from "tinacms/dist/react";
 import { Carousel } from "./blocks/carousel";
+import { ReactElement } from "react";
 
 export const Blocks = (props: Omit<Page, "id" | "_sys" | "_values">) => {
     return (
@@ -22,7 +23,15 @@ export const Blocks = (props: Omit<Page, "id" | "_sys" | "_values">) => {
     );
 };
 
-const Block = (block: PageBlocks) => {
+interface PageBlockProps<T = PageBlocks> {
+    data: T
+}
+
+export type PageBlockFunction<T = PageBlocks> = ({
+    data
+}: PageBlockProps<T>) => ReactElement;
+
+const Block = (block: PageBlocks): ReactElement<PageBlockProps, PageBlockFunction> => {
     switch (block.__typename) {
         case "PageBlocksContent":
             return <Content data={ block } />;

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">

components/posts/post.tsx

@@ -112,20 +112,6 @@ const components: Components<{
 };
 
 export const Post = (props: PostType) => {
-    const titleColorClasses = {
-        blue: "from-blue-400 to-blue-600 dark:from-blue-300 dark:to-blue-500",
-        teal: "from-teal-400 to-teal-600 dark:from-teal-300 dark:to-teal-500",
-        green: "from-green-400 to-green-600",
-        red: "from-red-400 to-red-600",
-        pink: "from-pink-300 to-pink-500",
-        purple:
-      "from-purple-400 to-purple-600 dark:from-purple-300 dark:to-purple-500",
-        orange:
-      "from-orange-300 to-orange-600 dark:from-orange-200 dark:to-orange-500",
-        yellow:
-      "from-yellow-400 to-yellow-500 dark:from-yellow-300 dark:to-yellow-500"
-    };
-
     const date = new Date(props.date);
     let formattedDate = "";
     if (!isNaN(date.getTime())) {

components/util/anchoring.tsx

@@ -8,7 +8,12 @@ interface AnchoringProps {
   linkTo?: string // Default: #main-page
 }
 
-export const Anchoring = (props: AnchoringProps) => {
+/**
+ * Made to be used with the carousel
+ * @param {AnchoringProps} props Props for the anchoring.
+ * @return {ReactElement} The function component
+ */
+export const Anchoring: React.FC<AnchoringProps> = (props) => {
     const [opacity, setOpacity] = useState(1);
     const anchoringRef = useRef<HTMLDivElement>(null);