Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
59d45bb
commit 88f5ac5
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import React, { useState } from 'react' | ||
| import { Envlope } from '../../components/Icons' | ||
| import cn from 'classnames' | ||
|
|
||
| interface NewsletterFormProps { | ||
| headerText: string | ||
| headerTextClass?: string | ||
| globeColorClass: 'pink-vibrant' | 'neutral-2' | ||
| inputClass?: string | ||
| } | ||
|
|
||
| const NewsletterForm: React.FC<NewsletterFormProps> = ({ | ||
| headerText, | ||
| headerTextClass, | ||
| inputClass, | ||
| globeColorClass, | ||
| }) => { | ||
| const [emailInputValue, setEmailInputValue] = useState('') | ||
| const [isSubscribed, setIsSubscribed] = useState(false) | ||
| const [error, setError] = useState('') | ||
|
|
||
| const handleSubscribe = async (e: React.FormEvent) => { | ||
| e.preventDefault() | ||
|
|
||
| if (!emailInputValue) { | ||
| setError('Please provide a valid email address.') | ||
| return | ||
| } | ||
|
|
||
| try { | ||
| const response = await fetch('/api/subscribeEmail', { | ||
| method: 'POST', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| body: JSON.stringify({ emailInputValue }), | ||
| }) | ||
|
|
||
| if (response.ok) { | ||
| setIsSubscribed(true) | ||
| setError('') | ||
| } else { | ||
| const data = await response.json() | ||
| setError(data.message || 'Subscription failed. Please try again.') | ||
| } | ||
| } catch (err) { | ||
| setError('An error occurred. Please try again.') | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <h3 className={cn('heading-3', headerTextClass)}>{headerText}</h3> | ||
| <form onSubmit={handleSubscribe}> | ||
| <div className="flex flex-col sm:flex-row"> | ||
| <div className="relative w-full"> | ||
| <input | ||
| className={cn('button-label-2 w-full flex-grow rounded-large p-3 pl-[2.7rem]', inputClass)} | ||
| aria-label="Enter Email" | ||
| type="email" | ||
| placeholder="Enter Email" | ||
| value={emailInputValue} | ||
| onChange={(e) => setEmailInputValue(e.target.value)} | ||
| /> | ||
| <Envlope className="absolute left-3 top-[50%] h-6 w-6 translate-y-[-50%]" color={globeColorClass} /> | ||
| </div> | ||
| <button className="group mt-2 flex items-center justify-center rounded-large bg-light-pink-vibrant p-3 transition hover:bg-dark-accent-2 dark:bg-dark-pink-vibrant hover:dark:bg-light-accent-2 sm:ml-2 sm:mt-0"> | ||
| <span className="button-label-1 text-white transition group-hover:text-dark-accent-1 group-hover:dark:text-light-accent-1"> | ||
| Submit | ||
| </span> | ||
| </button> | ||
| </div> | ||
| <div> | ||
| {!isSubscribed && error && ( | ||
| <p className="body-3 mt-2 text-light-status-critical-1 dark:text-dark-status-critical-1">{error}</p> | ||
| )} | ||
| {isSubscribed && ( | ||
| <p className="body-3 mt-2 text-light-status-success-1 dark:text-dark-status-success-1"> | ||
| Successfully subscribed | ||
| </p> | ||
| )} | ||
| </div> | ||
| </form> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default NewsletterForm |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.