NewsletterSettings (account/newsletter-settings.tsx)

Newsletter opt‑in component that posts to an API and shows status.

// Source: https://github.com/thedaviddias/Front-End-Checklist | License: MIT | Copyright 2017-2026 David Dias
// Provided via justclaw.it.com; keep this notice with the code.
'use client'

import { Button } from '@repo/design-system/ui/button'
import { useState } from 'react'

/** Offer an explicit newsletter opt-in independently of account creation. */
export function NewsletterSettings() {
  const [status, setStatus] = useState<'idle' | 'pending' | 'subscribed' | 'error'>('idle')

  /** Subscribe only after the user selects the signup button. */
  async function subscribe() {
    setStatus('pending')
    try {
      const response = await fetch('/api/subscribe/me', { method: 'POST' })
      setStatus(response.ok ? 'subscribed' : 'error')
    } catch {
      setStatus('error')
    }
  }


... (truncated -- full source via MCP)