Separated inline components from post.tsx

components/inline/newsletter-signup.tsx

@@ -0,0 +1,83 @@
+import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
+import React from "react";
+import format from "date-fns/format";
+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;