Separated inline components from post.tsx

components/blocks/content.tsx

@@ -2,11 +2,11 @@ import React from "react";
 import { Container } from "../util/container";
 import { Section } from "../util/section";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
-import type { Template, TinaTemplate } from "tinacms";
-import { PageBlocksCarousel, PageBlocksContent } from "../../tina/__generated__/types";
+import type { Template } from "tinacms";
+import { PageBlocksContent } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
 import { PageBlockFunction } from "../blocks-renderer";
-import { components } from "../posts/post";
+import inlineComponents, { richTextTemplates } from "../inline/inline-definitions";
 
 export const Content: PageBlockFunction<PageBlocksContent> = ({ data }) => {
     return (
@@ -19,7 +19,7 @@ export const Content: PageBlockFunction<PageBlocksContent> = ({ data }) => {
                 size="large"
                 width="medium"
             >
-                <TinaMarkdown components={ components } content={ data.body } />
+                <TinaMarkdown components={ inlineComponents } content={ data.body } />
             </Container>
         </Section>
     );
@@ -40,69 +40,7 @@ export const contentBlockSchema: Template = {
             type: "rich-text",
             label: "Body",
             name: "body",
-            templates: [
-                {
-                    name: "DateTime",
-                    label: "Date & Time",
-                    inline: true,
-                    fields: [
-                        {
-                            name: "format",
-                            label: "Format",
-                            type: "string",
-                            options: ["utc", "iso", "local"]
-                        }
-                    ]
-                },
-                {
-                    name: "BlockQuote",
-                    label: "Block Quote",
-                    fields: [
-                        {
-                            name: "children",
-                            label: "Quote",
-                            type: "rich-text"
-                        },
-                        {
-                            name: "authorName",
-                            label: "Author",
-                            type: "string"
-                        }
-                    ]
-                },
-                {
-                    name: "NewsletterSignup",
-                    label: "Newsletter Sign Up",
-                    fields: [
-                        {
-                            name: "children",
-                            label: "CTA",
-                            type: "rich-text"
-                        },
-                        {
-                            name: "placeholder",
-                            label: "Placeholder",
-                            type: "string"
-                        },
-                        {
-                            name: "buttonText",
-                            label: "Button Text",
-                            type: "string"
-                        },
-                        {
-                            name: "disclaimer",
-                            label: "Disclaimer",
-                            type: "rich-text"
-                        }
-                    ],
-                    ui: {
-                        defaultItem: {
-                            placeholder: "Enter your email",
-                            buttonText: "Notify Me"
-                        }
-                    }
-                }
-            ],
+            templates: richTextTemplates,
             isBody: true
         },
         {

components/blocks/hero.tsx

@@ -9,17 +9,6 @@ import { tinaField } from "tinacms/dist/react";
 import { PageBlockFunction } from "../blocks-renderer";
 
 export const Hero: PageBlockFunction<PageBlocksHero> = ({ data }) => {
-    const headlineColorClasses = {
-        blue: "from-blue-400 to-blue-600",
-        teal: "from-teal-400 to-teal-600",
-        green: "from-green-400 to-green-600",
-        red: "from-red-400 to-red-600",
-        pink: "from-pink-400 to-pink-600",
-        purple: "from-purple-400 to-purple-600",
-        orange: "from-orange-300 to-orange-600",
-        yellow: "from-yellow-400 to-yellow-600"
-    };
-
     return (
         <Section color={ data.color }>
             <Container