"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

interface NewsletterSignupProps
  extends React.HTMLAttributes<HTMLDivElement> {
  heading: string
  subtext: string
  checkboxLabel?: string
  placeholder?: string
  buttonLabel?: string
}

const NewsletterSignup = React.forwardRef<
  HTMLDivElement,
  NewsletterSignupProps
>(
  (
    {
      className,
      heading,
      subtext,
      checkboxLabel,
      placeholder = "you@company.com",
      buttonLabel = "Subscribe",
      ...props
    },
    ref
  ) => {
    return (
      <div
        ref={ref}
        className={cn(
          "rounded-2xl border border-border bg-card p-6",
          className
        )}
        {...props}
      >
        <div className="space-y-2">
          <h3 className="text-xl font-semibold text-foreground">{heading}</h3>
          <p className="text-sm text-muted-foreground">{subtext}</p>
        </div>

        <form className="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center">
          <input
            type="email"
            placeholder={placeholder}
            className="w-full rounded-md border border-border bg-background px-4 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-border focus:outline-none"
          />
          <button
            type="submit"
            className="inline-flex items-center justify-center rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-foreground"
          >
            {buttonLabel}
          </button>
        </form>

        {checkboxLabel ? (
          <label className="mt-4 flex items-start gap-2 text-sm text-muted-foreground">
            <input
              type="checkbox"
              className="mt-1 h-4 w-4 rounded border border-border bg-background text-primary"
            />
            <span>{checkboxLabel}</span>
          </label>
        ) : null}
      </div>
    )
  }
)
NewsletterSignup.displayName = "NewsletterSignup"

export { NewsletterSignup }
Newsletter Signup

Get product updates

Dependencies

Files

Installation
