Cleaned up some code and added a somewhat responsive header burger

components/inline/block-quote.tsx

@@ -1,12 +1,13 @@
 import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
 import { RichTextTemplate } from "@tinacms/schema-tools";
+import React from "react";
 
 export interface BlockQuoteProps {
     children: TinaMarkdownContent;
     authorName: string;
 }
 
-const BlockQuote = (props: BlockQuoteProps) => (
+const BlockQuote = (props: BlockQuoteProps): React.ReactElement => (
     <div>
         <blockquote>
             <TinaMarkdown content={ props.children } />

components/inline/image.tsx

@@ -89,7 +89,7 @@ const Image = (props: ImageProps) => {
 
 export const imageSchema: RichTextTemplate = {
     name: "Image",
-    label: "Image",
+    label: "Advanced Image",
     ui: {
         defaultItem: {
             size: Object.values(imageSize)[0],

components/inline/inline-definitions.tsx

@@ -1,7 +1,6 @@
 import { Components } from "tinacms/dist/rich-text";
 import BlockQuote, { BlockQuoteProps, blockQuoteSchema } from "./block-quote";
 import DateTime, { DateTimeProps, dateTimeSchema } from "./date-time";
-import NewsletterSignup, { NewsletterSignupProps, newsletterSignupSchema } from "./newsletter-signup";
 import { Prism } from "tinacms/dist/rich-text/prism";
 import React from "react";
 import Image, { ImageProps, imageSchema } from "./image";
@@ -23,7 +22,6 @@ const HTMLInline = (props: { value: string }) => {
 const inlineComponents: Components<{
     BlockQuote: BlockQuoteProps;
     DateTime: DateTimeProps;
-    NewsletterSignup: NewsletterSignupProps;
     Image: ImageProps;
 }> = {
     code_block: (props) => <Prism { ...props } />,
@@ -38,14 +36,12 @@ const inlineComponents: Components<{
     ),
     BlockQuote,
     DateTime,
-    NewsletterSignup,
     Image
 };
 
 export const richTextTemplates: RichTextTemplate[] = [
     dateTimeSchema,
     blockQuoteSchema,
-    newsletterSignupSchema,
     imageSchema
 ];
 

components/inline/newsletter-signup.tsx

@@ -1,82 +0,0 @@
-import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
-import React from "react";
-import { RichTextTemplate } from "@tinacms/schema-tools";
-
-export interface NewsletterSignupProps {
-    placeholder: string;
-    buttonText: string;
-    children: TinaMarkdownContent;
-    disclaimer?: TinaMarkdownContent;
-}
-
-const NewsletterSignup = (props: NewsletterSignupProps) => (
-    <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>
-);
-
-export const newsletterSignupSchema: RichTextTemplate = {
-    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"
-        }
-    }
-};
-
-export default NewsletterSignup;