Footer Newsletter

1"use client";
2 
3import * as React from "react";
4 
5import { Button } from "@/components/ui/atoms/button";
6import { Input } from "@/components/ui/atoms/input";
7import { cn } from "@/lib/utils";
8 
9export interface FooterNewsletterProps extends React.HTMLAttributes<HTMLDivElement> {
10  heading?: string;
11  description?: string;
12  placeholder?: string;
13  buttonText?: string;
14  onSubscribe?: (email: string) => void;
15}
16 
17const FooterNewsletter = React.forwardRef<HTMLDivElement, FooterNewsletterProps>(
18  (
19    {
20      className,
21      heading = "Subscribe to our newsletter",
22      description = "Get the latest updates directly in your inbox.",
23      placeholder = "you@example.com",
24      buttonText = "Subscribe",
25      onSubscribe,
26      ...props
27    },
28    ref,
29  ) => {
30    const [email, setEmail] = React.useState("");
31 
32    function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
33      event.preventDefault();
34      const value = email.trim();
35      if (!value) return;
36      onSubscribe?.(value);
37      setEmail("");
38    }
39 
40    return (
41      <div
42        ref={ref}
43        data-slot="footer-newsletter"
44        className={cn(
45          "rounded-lg border border-border bg-surface-subtle p-4 @sm/footer:p-6",
46          className,
47        )}
48        {...props}
49      >
50        <h4 className="text-sm font-semibold text-foreground">{heading}</h4>
51        <p className="mt-1 text-xs text-muted-foreground">{description}</p>
52        <form
53          data-slot="footer-newsletter-form"
54          onSubmit={handleSubmit}
55          className="mt-4 flex flex-col gap-2 @sm/footer:flex-row"
56        >
57          <Input
58            type="email"
59            value={email}
60            onChange={(event) => setEmail(event.target.value)}
61            placeholder={placeholder}
62            aria-label={placeholder}
63            required
64            className="min-w-0 flex-1"
65          />
66          <Button type="submit" className="shrink-0">
67            {buttonText}
68          </Button>
69        </form>
70      </div>
71    );
72  },
73);
74FooterNewsletter.displayName = "FooterNewsletter";
75 
76export { FooterNewsletter };