forked from mrwyndham/fastpocket
97 lines
3.4 KiB
TypeScript
97 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import pb from "@/lib/pocketbase";
|
|
import { emailValidationSchema } from "@/utils/form";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import React from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { toast } from "react-toastify";
|
|
|
|
function Newsletter() {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: yupResolver(emailValidationSchema),
|
|
});
|
|
|
|
const onSubmit = async (data: { email: string }) => {
|
|
try {
|
|
await pb.collection("contact").create({ source: "newsletter", ...data });
|
|
localStorage.setItem("newsletter", JSON.stringify(data));
|
|
} catch (error) {
|
|
if (error instanceof Error) {
|
|
toast.error(error.message, {
|
|
position: "bottom-left",
|
|
autoClose: 5000,
|
|
hideProgressBar: false,
|
|
closeOnClick: true,
|
|
pauseOnHover: true,
|
|
draggable: true,
|
|
progress: undefined,
|
|
theme: "colored",
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section>
|
|
<div className="max-w-6xl mx-auto px-4 sm:px-6">
|
|
{/* CTA box */}
|
|
<div
|
|
className="relative bg-gradient-to-r from-primary to-secondary py-10 px-8 md:py-16 md:px-12"
|
|
data-aos="fade-up"
|
|
>
|
|
{typeof window !== "undefined" &&
|
|
!localStorage.getItem("newsletter") ? (
|
|
<div className="relative flex flex-col lg:flex-row justify-between items-center">
|
|
<div className="mb-6 lg:mr-16 lg:mb-0 text-center lg:text-left lg:w-1/2 text-primary-content">
|
|
<h3 className=" mb-2 text-3xl font-black">
|
|
Stay Ahead of the Curve
|
|
</h3>
|
|
<p className=" text-lg">
|
|
Join our newsletter to get top news before anyone else.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="w-full lg:w-1/2">
|
|
<form
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
className="flex flex-col sm:flex-row justify-center max-w-xs mx-auto sm:max-w-md lg:max-w-none gap-x-2"
|
|
>
|
|
<div className="w-full">
|
|
<input
|
|
id="NewsletterEmail"
|
|
type="text"
|
|
className="py-3 px-4 block w-full text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
|
|
placeholder="Email…"
|
|
aria-label="Email…"
|
|
{...register("email")}
|
|
/>
|
|
<div className="text-start text-sm italic text-error-content">
|
|
{errors.email?.message}
|
|
</div>
|
|
</div>
|
|
<button className="btn text-primary-content btn-neutral">
|
|
Subscribe
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="relative flex flex-col lg:flex-row justify-between items-center text-primary-content">
|
|
<h3 className=" mb-2 text-3xl font-black">
|
|
Thanks for subscribing. You won't regret it!
|
|
</h3>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default Newsletter;
|