Separated inline components from post.tsx

components/posts/post.tsx

@@ -16,100 +16,9 @@ import { Container } from "../util/container";
 import { Section } from "../util/section";
 import format from "date-fns/format";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
-import { Prism } from "tinacms/dist/rich-text/prism";
-import type { TinaMarkdownContent, Components } from "tinacms/dist/rich-text";
 import { PostType } from "../../pages/posts/[filename]";
 import { tinaField } from "tinacms/dist/react";
-
-export const components: Components<{
-  BlockQuote: {
-    children: TinaMarkdownContent;
-    authorName: string;
-  };
-  DateTime: {
-    format?: string;
-  };
-  NewsletterSignup: {
-    placeholder: string;
-    buttonText: string;
-    children: TinaMarkdownContent;
-    disclaimer?: TinaMarkdownContent;
-  };
-}> = {
-    code_block: (props) => <Prism { ...props } />,
-    BlockQuote: (props: {
-    children: TinaMarkdownContent;
-    authorName: string;
-  }) => {
-        return (
-            <div>
-                <blockquote>
-                    <TinaMarkdown content={ props.children } />
-                    { props.authorName }
-                </blockquote>
-            </div>
-        );
-    },
-    DateTime: (props) => {
-        const dt = React.useMemo(() => {
-            return new Date();
-        }, []);
-
-        switch (props.format) {
-            case "iso":
-                return <span>{ format(dt, "yyyy-MM-dd") }</span>;
-            case "utc":
-                return <span>{ format(dt, "eee, dd MMM yyyy HH:mm:ss OOOO") }</span>;
-            case "local":
-                return <span>{ format(dt, "P") }</span>;
-            default:
-                return <span>{ format(dt, "P") }</span>;
-        }
-    },
-    NewsletterSignup: (props) => {
-        return (
-            <div className="bg-white">
-                <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
-                    <div className="">
-                        <TinaMarkdown content={ props.children } />
-                    </div>
-                    <div className="mt-8 ">
-                        <form className="sm:flex">
-                            <label htmlFor="email-address" className="sr-only">
-                Email address
-                            </label>
-                            <input
-                                id="email-address"
-                                name="email-address"
-                                type="email"
-                                autoComplete="email"
-                                required
-                                className="w-full px-5 py-3 border border-gray-300 shadow-sm placeholder-gray-400 focus:ring-1 focus:ring-teal-500 focus:border-teal-500 sm:max-w-xs rounded-md"
-                                placeholder={ props.placeholder }
-                            />
-                            <div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
-                                <button
-                                    type="submit"
-                                    className="w-full flex items-center justify-center py-3 px-5 border border-transparent text-base font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
-                                >
-                                    { props.buttonText }
-                                </button>
-                            </div>
-                        </form>
-                        <div className="mt-3 text-sm text-gray-500">
-                            { props.disclaimer && <TinaMarkdown content={ props.disclaimer } /> }
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    },
-    img: (props) => (
-        <span className="flex items-center justify-center">
-            <img src={ props.url } alt={ props.alt } />
-        </span>
-    )
-};
+import inlineComponents from "../inline/inline-definitions";
 
 export const Post = (props: PostType) => {
     const date = new Date(props.date);
@@ -188,7 +97,7 @@ export const Post = (props: PostType) => {
                     data-tina-field={ tinaField(props, "_body") }
                     className="prose dark:prose-dark w-full max-w-none"
                 >
-                    <TinaMarkdown components={ components } content={ props._body } />
+                    <TinaMarkdown components={ inlineComponents } content={ props._body } />
                 </div>
             </Container>
         </Section>