Simple Mailchimp sign up form for nextjs with tailwindcss

next-mailchimp

import React, { useState } from 'react';
import Link from 'next/link';
import MailchimpSubscribe from 'react-mailchimp-subscribe';
import { CheckCircleIcon, InformationCircleIcon, XCircleIcon } from '@heroicons/react/solid';


export default function EmailList(): JSX.Element {
  // error currently not used
  const [error, setError] = useState(null);
  const [email, setEmail] = useState('');

  const MAILCHIMP_URL = process.env.NEXT_PUBLIC_MAILCHIMP_URL;

  function handleSubmit(subscribe: any) {
    setError(null);
    if (!email) {
      setError('Please enter a valid email address');
      return null;
    }

    const isFormValidated = subscribe({ EMAIL: email });

    // The absolute most basic check if it is a real email address
    return email && email.indexOf("@") > -1 && isFormValidated;
  }

  return(
    <MailchimpSubscribe
      url={MAILCHIMP_URL}
      render={(props) => {
        const { subscribe, status, message } = props || {};
        return (
          <>
            <div className="mt-8 mb-4 sm:flex">
              <label htmlFor="email-address" className="sr-only">
                Email address
              </label>
              <input
                id="email-address"
                name="email"
                type="email"
                autoComplete="email"
                value={email}
                onChange={event => setEmail(event.target.value)}
                required
                className="w-full px-5 py-3 placeholder-gray-500 focus:ring-primary-500 focus:border-primary-500 sm:max-w-xs border border-gray-300 rounded-md"
                placeholder="Your best email"
              />
              <div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
                <button
                  onClick={() => handleSubmit(subscribe)}
                  className="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                >
                  Subscribe
                </button>
              </div>
            </div>
            {status === "sending" && (
              <div className="rounded-md bg-blue-50 p-4">
                <div className="flex">
                  <div className="flex-shrink-0">
                    <InformationCircleIcon className="h-5 w-5 text-blue-400" aria-hidden="true" />
                  </div>
                  <div className="ml-3 flex-1 md:flex md:justify-between">
                    <p className="text-sm text-blue-700">Sending...</p>
                  </div>
                </div>
              </div>
            )}
            {status === "error" && (
              <div className="rounded-md bg-red-50 p-4">
                <div className="flex">
                  <div className="flex-shrink-0">
                    <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
                  </div>
                  <div className="ml-3">
                    <h3 className="text-sm font-medium text-red-800">We found some errors with your submission</h3>
                    <div className="mt-2 text-sm text-red-700" dangerouslySetInnerHTML={{__html: message}}/>
                  </div>
                </div>
              </div>
            )}
            {status === "success" && (
              <>
                <div className="rounded-md bg-green-50 p-4">
                  <div className="flex">
                    <div className="flex-shrink-0">
                      <CheckCircleIcon className="h-5 w-5 text-green-400" aria-hidden="true" />
                    </div>
                    <div className="ml-3">
                      <p className="text-sm font-medium text-green-800">Successfully subscribed!</p>
                    </div>
                  </div>
                </div>
              </>
            )}
            <div className="mt-2 text-center text-sm text-gray-600 hover:text-gray-900">
              <Link href="/" >
                <a>Back to home page</a>
              </Link>
            </div>
          </>
        );
      }}
    />
  );
}