82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
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; |