"use client";

import * as React from "react";
import Link from "next/link";
import { Lock } from "lucide-react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export const meta = {
  name: "Inline email signup",
  description: "Heading and copy beside an inline email field and button with a privacy note.",
  interactive: true,
};

export default function Newsletter01() {
  const [email, setEmail] = React.useState("");

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    toast.success("Subscribed!", { description: "Check your inbox to confirm your subscription." });
    setEmail("");
  }

  return (
    <section className="mx-auto max-w-6xl px-4 py-16 sm:px-6 sm:py-24">
      <div className="grid items-center gap-8 border-y py-12 lg:grid-cols-2 lg:gap-16">
        <div>
          <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Insights, every other Tuesday</h2>
          <p className="mt-4 text-muted-foreground">
            One short email with research, playbooks and benchmarks on understanding customers. Read by 18,000 product
            and CX leaders.
          </p>
        </div>
        <div>
          <form onSubmit={handleSubmit} className="flex flex-col gap-3 sm:flex-row">
            <Label htmlFor="newsletter-01-email" className="sr-only">
              Email address
            </Label>
            <Input
              id="newsletter-01-email"
              type="email"
              required
              autoComplete="email"
              placeholder="Enter your email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="h-10"
            />
            <Button type="submit" size="lg" className="h-10 shrink-0">
              Subscribe
            </Button>
          </form>
          <p className="mt-3 flex items-start gap-2 text-xs text-muted-foreground">
            <Lock className="mt-0.5 size-3.5 shrink-0" />
            <span>
              We care about your data. Unsubscribe anytime. Read our{" "}
              <Link href="#" className="underline underline-offset-4 hover:text-foreground">
                privacy policy
              </Link>
              .
            </span>
          </p>
        </div>
      </div>
    </section>
  );
}
Inline email signupInteractive

Newsletter card with past issuesInteractive
