✨ Add react-email for email templates (#2421)

packages/react-email/ui/Button.tsx

@@ -0,0 +1,12 @@
+import { Button } from "@react-email/components"
+
+type ButtonProps = React.PropsWithChildren & { href: string }
+
+export const LinkButton = ({ children, href }: ButtonProps) => (
+  <Button
+    href={href}
+    className="bg-brand text-white rounded-md font-semibold text-sm mt-2 mb-7 inline-block text-center no-underline px-7 py-3.5"
+  >
+    {children}
+  </Button>
+)

packages/react-email/ui/Callout.tsx

@@ -0,0 +1,22 @@
+import { Section, Text } from "@react-email/components"
+
+type CalloutProps = React.PropsWithChildren
+
+export const Callout = ({ children }: CalloutProps) => (
+  <Section className="border-0 border-l-2 border-solid border-brand pl-5 my-7">
+    {children}
+  </Section>
+)
+
+type DetailProps = { label: string; value: string }
+
+export const Detail = ({ label, value }: DetailProps) => (
+  <Text className="m-0 my-3">
+    <span className="block text-[11px] uppercase tracking-[0.08em] text-muted">
+      {label}
+    </span>
+    <span className="block text-sm font-semibold break-all font-mono mt-1">
+      {value}
+    </span>
+  </Text>
+)

packages/react-email/ui/Heading.tsx

@@ -0,0 +1,12 @@
+import { Heading as BaseHeading } from "@react-email/components"
+
+type HeadingProps = React.PropsWithChildren
+
+export const Heading = ({ children }: HeadingProps) => (
+  <BaseHeading
+    as="h1"
+    className="text-2xl leading-8 font-semibold tracking-[-0.02em] text-body m-0 mb-5"
+  >
+    {children}
+  </BaseHeading>
+)

packages/react-email/ui/Layout.tsx

@@ -0,0 +1,85 @@
+import {
+  Body,
+  Head,
+  Hr,
+  Html,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from "@react-email/components"
+
+type LayoutProps = React.PropsWithChildren & {
+  title: string
+  project_name: string
+  preview?: string
+}
+
+export const Layout = ({
+  project_name,
+  title,
+  preview,
+  children,
+}: LayoutProps) => {
+  return (
+    <Tailwind
+      config={{
+        theme: {
+          extend: {
+            colors: {
+              surface: "#ffffff",
+              body: "#1e293b",
+              muted: "#64748b",
+              rule: "#e2e8f0",
+              brand: {
+                DEFAULT: "#009688",
+                dark: "#00695c",
+              },
+            },
+            fontFamily: {
+              sans: [
+                "-apple-system",
+                "BlinkMacSystemFont",
+                '"Segoe UI"',
+                "Roboto",
+                "Oxygen",
+                "Ubuntu",
+                "Cantarell",
+                '"Fira Sans"',
+                '"Droid Sans"',
+                '"Helvetica Neue"',
+                "sans-serif",
+              ],
+            },
+          },
+        },
+      }}
+    >
+      <Html lang="en" dir="ltr">
+        <Head>
+          <title>{title}</title>
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+          />
+        </Head>
+        {preview ? <Preview>{preview}</Preview> : null}
+        <Body className="bg-surface font-sans text-body max-w-[560px] w-full mx-auto my-0 py-12 px-6">
+          <Section>
+            <Hr className="border-0 border-t-2 border-solid border-brand w-8 m-0" />
+            <Text className="text-body text-[13px] font-semibold uppercase tracking-[0.1em] mt-4 mb-9">
+              {project_name}
+            </Text>
+          </Section>
+          <Section>{children}</Section>
+          <Hr className="border-0 border-t border-solid border-rule mt-10 mb-5" />
+          <Section>
+            <Text className="text-xs leading-5 text-muted m-0">
+              © {new Date().getFullYear()} {project_name}. All rights reserved.
+            </Text>
+          </Section>
+        </Body>
+      </Html>
+    </Tailwind>
+  )
+}

packages/react-email/ui/Link.tsx

@@ -0,0 +1,7 @@
+type LinkProps = React.PropsWithChildren & { href: string }
+
+export const Link = ({ children, href }: LinkProps) => (
+  <a href={href} className="text-brand-dark underline break-all">
+    {children}
+  </a>
+)