jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add blog newsletter form

Browse Source
This commit is contained in:
Timothy Lin
2021-09-11 16:36:59 +08:00
parent bebe0d6a1e
commit 897ebfe0ec
4 changed files with 44 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/MDXComponents.js
View File

@ -5,12 +5,14 @@ import Image from './Image'
import CustomLink from './Link'
import TOCInline from './TOCInline'
import Pre from './Pre'
import { BlogNewsletterForm } from './NewsletterForm'
export const MDXComponents = {
Image,
TOCInline,
a: CustomLink,
pre: Pre,
BlogNewsletterForm: BlogNewsletterForm,
wrapper: ({ components, layout, ...rest }) => {
const Layout = require(`../layouts/${layout}`).default
return <Layout {...rest} />

20
components/FormSubscribe.js → components/NewsletterForm.js
View File

@ -2,7 +2,7 @@ import { useRef, useState } from 'react'
import siteMetadata from '@/data/siteMetadata'
const FormSubscribe = () => {
const NewsletterForm = ({ title = 'Subscribe to the newsletter' }) => {
const inputEl = useRef(null)
const [error, setError] = useState(false)
const [message, setMessage] = useState('')
@ -36,9 +36,7 @@ const FormSubscribe = () => {
return (
<div>
<div className="pb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">
Subscribe to the newsletter
</div>
<div className="pb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">{title}</div>
<form className="flex flex-col sm:flex-row" onSubmit={subscribe}>
<div>
<label className="sr-only" htmlFor="email-input">
@ -58,7 +56,7 @@ const FormSubscribe = () => {
</div>
<div className="flex w-full mt-2 rounded-md shadow-sm sm:mt-0 sm:ml-3">
<button
className={`w-full bg-primary-500 px-4 py-2 rounded-md font-medium text-white ${
className={`py-2 sm:py-0 w-full bg-primary-500 px-4 rounded-md font-medium text-white ${
subscribed ? 'cursor-default' : 'hover:bg-primary-700 dark:hover:bg-primary-400'
} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-600 dark:ring-offset-black`}
type="submit"
@ -69,10 +67,18 @@ const FormSubscribe = () => {
</div>
</form>
{error && (
<p className="pt-2 text-sm text-red-500 w-72 sm:w-96 dark:text-red-400">{message}</p>
<div className="pt-2 text-sm text-red-500 w-72 sm:w-96 dark:text-red-400">{message}</div>
)}
</div>
)
}
export { FormSubscribe }
export default NewsletterForm
export const BlogNewsletterForm = ({ title }) => (
<div className="flex items-center justify-center">
<div className="p-6 bg-gray-100 dark:bg-gray-800 sm:px-14 sm:py-8">
<NewsletterForm title={title} />
</div>
</div>
)