Free React Email Back in Stock Template

import * as React from 'react';

import {
  Band,
  Brand,
  Display,
  EmailImage,
  EmailLayout,
  Eyebrow,
  OutlineButton,
  Plate,
  Prose,
} from './components';

export interface BackInStockEmailProps {
  brand?: Brand;
  subject?: string;
  preview?: string;
  eyebrow?: string;
  headline?: React.ReactNode;
  hero?: EmailImage;
  body?: string;
  /** Stock, price and size on one small-caps line. */
  availability?: string;
  cta?: { label: string; href: string };
  /** Why this person is getting the email. Restock alerts need it. */
  reason?: string;
}

/**
 * Back in stock — the shortest template in the bundle, on purpose. One
 * photograph, one paragraph, the count, and a button.
 */
export function BackInStockEmail({
  brand,
  subject = 'Ethiopia Guji is back',
  preview = 'You asked to know. You now know. 140 bags.',
  eyebrow = 'Back in stock',
  headline = (
    <>
      Ethiopia Guji
      <br />
      is on the shelf
    </>
  ),
  hero = {
    src: 'https://images.unsplash.com/photo-1447933601403-0c6688de566e?w=1200&h=760&q=75&auto=format&fit=crop',
    alt: 'Roasted coffee beans',
    width: 600,
    height: 380,
  },
  body = 'The new harvest landed Thursday and we roasted it Friday. Jasmine, apricot, and a finish that tastes like iced tea in the best possible way. Last time this sold out in nine days, and we are not going to pretend that was a marketing decision.',
  availability = '140 bags · $26 · 12 oz',
  cta = { label: 'Buy before it goes again', href: '#' },
  reason = 'You are getting this because you tapped “notify me” on 2 July. We only send one of these per restock.',
}: BackInStockEmailProps = {}) {
  return (
    <EmailLayout brand={brand} subject={subject} preview={preview}>
      <Band padding="36px 40px 24px" align="center">
        <Eyebrow>{eyebrow}</Eyebrow>
        <Display>{headline}</Display>
      </Band>

      <Band padding="0 40px">
        <Plate {...hero} />
      </Band>

      <Band padding="28px 40px 36px" align="center">
        <Prose>{body}</Prose>
        {availability ? (
          <Eyebrow size={13} letterSpacing=".14em" margin="0 0 18px">
            {availability}
          </Eyebrow>
        ) : null}
        <OutlineButton href={cta.href} align="center">
          {cta.label}
        </OutlineButton>
      </Band>

      <Band tone="paper" padding="22px 40px 26px" align="center">
        <Prose size={13} margin="0 0 16px">
          {reason}
        </Prose>
      </Band>
    </EmailLayout>
  );
}

export default BackInStockEmail;