"use client" import { useState } from "react" import { Button } from "@/app/_components/ui/button" import { Input } from "@/app/_components/ui/input" import { Card, CardContent } from "@/app/_components/ui/card" import { Mail, ArrowRight, Check, LucideIcon } from "lucide-react" export interface NewsletterContent { icon: LucideIcon title: string description: string placeholder: string submitButtonText: string successMessage: string privacyText: string inlineTitle: string inlineDescription: string } export interface NewsletterSectionProps { layout?: "centered" | "inline" | "card" content?: NewsletterContent } export const defaultNewsletterContent: NewsletterContent = { icon: Mail, title: "Subscribe to our newsletter", description: "Get the latest updates on new blocks, features, and tips.", placeholder: "Enter your email", submitButtonText: "Subscribe", successMessage: "Subscribed", privacyText: "We respect your privacy. Unsubscribe at any time.", inlineTitle: "Stay updated", inlineDescription: "Get notified when we release new blocks and features.", } /** * NewsletterSection - Newsletter signup section * * @description * A newsletter signup section with email input and submit button. * Supports multiple layout variations. * * @usage * ```tsx * import { NewsletterSection } from "@/components/blocks/newsletter-section" * * * ``` * * @dependencies * - lucide-react (for icons) * - @/components/ui/button * - @/components/ui/input * - @/components/ui/card * * @props * - layout: "centered" | "inline" | "card" - Layout style * - content: NewsletterContent - Content and labels for the newsletter section * * @category Newsletter * @tags marketing, email, signup */ export function NewsletterSection({ layout = "centered", content = defaultNewsletterContent, }: NewsletterSectionProps) { const [email, setEmail] = useState("") const [isSubmitted, setIsSubmitted] = useState(false) const IconComponent = content.icon const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (email) { setIsSubmitted(true) setTimeout(() => { setIsSubmitted(false) setEmail("") }, 3000) } } const formContent = ( <>

{content.title}

{content.description}

) const form = ( ) if (layout === "card") { return (

{formContent} {form}

{content.privacyText}

) } if (layout === "inline") { return (

{content.inlineTitle}

{content.inlineDescription}

{form}

) } return (

{formContent} {form}

Join 5,000+ developers. No spam, unsubscribe anytime.

) }

Newsletter Section

Installation

Preview

Subscribe to our newsletter

Usage

Dependencies

shadcn/ui Components