Newsletter

'use client'

import * as React from 'react'
import { Ground } from '@fairgarden-private/design/components/Ground'
import { Link } from '@fairgarden-private/design/components/Link'
import {
  Newsletter,
  type NewsletterStatusKind,
} from '@fairgarden-private/design/components/Newsletter'
import styles from './inline.module.css'

/** An envelope at the block tier, drawn in currentColor (--role-accent). */
function Envelope() {
  return (
    <svg viewBox="0 0 36 36" aria-hidden="true" focusable="false" className={styles.icon}>
      <rect x="4" y="8" width="28" height="20" rx="2" />
      <path d="m5 10 13 10 13-10" />
    </svg>
  )
}

/** The inline footer form on the night band, with the butted submit cell. Submit to see "Sending…", then success. */
export function NewsletterInline() {
  const [busy, setBusy] = React.useState(false)
  const [status, setStatus] = React.useState<NewsletterStatusKind | undefined>()

  return (
    <Ground kind="band" preset="night" render={<div />} className={styles.band}>
      <div className={styles.column}>
        <Newsletter
          heading="Subscribe"
          pitch="Stories from the land, once a month."
          icon={<Envelope />}
          printUrl="example.org/newsletter"
          busy={busy}
          status={status}
          statusMessage="Check your inbox to confirm."
          legal={
            <>
              We never share your address. <Link href="https://example.org/privacy">Privacy</Link>
            </>
          }
          onSubscribe={() => {
            setBusy(true)
            window.setTimeout(() => {
              setBusy(false)
              setStatus('success')
            }, 1200)
          }}
        />
      </div>
    </Ground>
  )
}

'use client'

import * as React from 'react'
import { Ground } from '@fairgarden-private/design/components/Ground'
import { Link } from '@fairgarden-private/design/components/Link'
import { Newsletter } from '@fairgarden-private/design/components/Newsletter'
import styles from './straddle.module.css'

/**
 * The royal straddle card opening the night band: the seam falls between
 * its heading and first field. `reading` widens it to the reading measure
 * from 1024 px, so Email and Postcode share a row.
 */
export function NewsletterStraddle() {
  const [reading, setReading] = React.useState(true)

  return (
    <div className={styles.frame}>
      <label className={styles.toggle}>
        <input
          type="checkbox"
          checked={reading}
          onChange={(event) => setReading(event.target.checked)}
        />{' '}
        Reading page (align to the prose column)
      </label>
      <Ground kind="band" preset="paper" render={<div />} className={styles.upper}>
        <p className={styles.prose}>
          …and so the thrush returns each May to the same few acres of old forest, which is why
          protecting them matters.
        </p>
      </Ground>
      <Ground kind="band" preset="night" render={<div />} className={styles.lower}>
        <div className={styles.container}>
          <Newsletter
            kind="straddle"
            grained
            reading={reading}
            postcode
            heading="Get the Latest Bird Conservation News"
            printUrl="example.org/newsletter"
            submitLabel="Sign Up"
            legal={
              <>
                By signing up you agree to our <Link href="https://example.org/terms">terms</Link>.
              </>
            }
          />
          <p className={styles.after}>The footer continues here.</p>
        </div>
      </Ground>
    </div>
  )
}

import { Newsletter } from '@fairgarden-private/design/components/Newsletter'
import styles from './band.module.css'

/** The band on the page ground and in a leaf campaign field, and the ruled row. The ruled row shows a server failure. */
export function NewsletterBand() {
  return (
    <div className={styles.stack}>
      <Newsletter
        kind="band"
        heading="Field Notes, Every Friday"
        pitch="One story, one walk and one thing to do this weekend."
        printUrl="example.org/notes"
      />
      <Newsletter
        kind="band"
        field="leaf"
        heading="Join the Spring Planting"
        pitch="We'll send dates and places near you."
        submitLabel="Count Me In"
        printUrl="example.org/planting"
      />
      <Newsletter
        kind="ruled"
        heading="Letters from the Orchard"
        printUrl="example.org/letters"
        status="warning"
        statusMessage="We couldn't reach the server. Try again in a minute."
      />
    </div>
  )
}