81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
// import { addEmail } from "@/app/actions/addEmail";
|
|
import { toast } from "@/components/ui/toaster";
|
|
import { useRef } from "react";
|
|
import { useFormStatus } from "react-dom";
|
|
import { Loading } from "./loading";
|
|
import { Button } from "../ui/button";
|
|
|
|
function ArrowIcon(props: any) {
|
|
return (
|
|
<svg viewBox="0 0 16 6" aria-hidden="true" {...props}>
|
|
<path
|
|
fill="currentColor"
|
|
fillRule="evenodd"
|
|
clipRule="evenodd"
|
|
d="M16 3 10 .5v2H0v1h10v2L16 3Z"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
const SubmitButton = () => {
|
|
const { pending } = useFormStatus();
|
|
return (
|
|
<Button
|
|
aria-label="Submit"
|
|
size="icon"
|
|
disabled={pending}
|
|
className="flex aspect-square h-full items-center justify-center rounded-xl bg-gray-950 text-white transition hover:bg-gray-800 disabled:bg-gray-500"
|
|
>
|
|
{pending ? <Loading className="h-4 w-4" /> : <ArrowIcon className="w-4" />}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export function NewsletterForm() {
|
|
const formRef = useRef<HTMLFormElement>(null);
|
|
return (
|
|
<form
|
|
ref={formRef}
|
|
className="max-w-md"
|
|
action={async (formData) => {
|
|
// const test = await addEmail(formData);
|
|
// formRef.current?.reset();
|
|
// if (test.success) {
|
|
// toast.success("Thanks for signing up!");
|
|
// } else {
|
|
// toast.error("Something went wrong, please try again later.");
|
|
// }
|
|
|
|
toast.success("Thanks for signing up!");
|
|
}}
|
|
>
|
|
<h2 className="font-display text-sm font-semibold tracking-wider text-gray-950">
|
|
Sign up for our newsletter
|
|
</h2>
|
|
<p className="mt-4 text-sm text-gray-700">Subscribe to get the latest Unkey news</p>
|
|
<label htmlFor="email" className="sr-only">
|
|
Enter email address to subscribe:
|
|
</label>
|
|
<div className="relative mt-6">
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
id="email"
|
|
placeholder="Email address"
|
|
autoComplete="email"
|
|
aria-label="Email address"
|
|
required
|
|
className="block w-full rounded-2xl border border-gray-300 bg-transparent py-4 pl-6 pr-20 text-base/6 text-gray-950 ring-4 ring-transparent transition placeholder:text-gray-500 focus:border-gray-950 focus:outline-none focus:ring-gray-950/5"
|
|
/>
|
|
|
|
<div className="absolute inset-y-1 right-1 flex justify-end">
|
|
<SubmitButton />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|