B2B-88: add starter kit structure and elements

packages/email-templates/src/components/body-style.tsx

@@ -0,0 +1,14 @@
+export function BodyStyle() {
+  return (
+    <style>
+      {`
+        body {
+          background-color: #fafafa;
+          margin: auto;
+          font-family: sans-serif;
+          color: #242424;
+        }
+    `}
+    </style>
+  );
+}

packages/email-templates/src/components/content.tsx

@@ -0,0 +1,19 @@
+import { Container } from '@react-email/components';
+
+export function EmailContent({
+  children,
+  className,
+}: React.PropsWithChildren<{
+  className?: string;
+  displayLogo?: boolean;
+}>) {
+  return (
+    <Container
+      className={
+        'mx-auto rounded-xl bg-white px-[48px] py-[36px] ' + className || ''
+      }
+    >
+      {children}
+    </Container>
+  );
+}

packages/email-templates/src/components/cta-button.tsx

@@ -0,0 +1,16 @@
+import { Button } from '@react-email/components';
+
+export function CtaButton(
+  props: React.PropsWithChildren<{
+    href: string;
+  }>,
+) {
+  return (
+    <Button
+      className="w-full rounded bg-[#000000] py-3 text-center text-[16px] font-semibold text-white no-underline"
+      href={props.href}
+    >
+      {props.children}
+    </Button>
+  );
+}

packages/email-templates/src/components/footer.tsx

@@ -0,0 +1,11 @@
+import { Container, Text } from '@react-email/components';
+
+export function EmailFooter(props: React.PropsWithChildren) {
+  return (
+    <Container>
+      <Text className="px-4 text-[12px] leading-[20px] text-gray-300">
+        {props.children}
+      </Text>
+    </Container>
+  );
+}

packages/email-templates/src/components/header.tsx

@@ -0,0 +1,9 @@
+import { Container, Section } from '@react-email/components';
+
+export function EmailHeader(props: React.PropsWithChildren) {
+  return (
+    <Container>
+      <Section>{props.children}</Section>
+    </Container>
+  );
+}

packages/email-templates/src/components/heading.tsx

@@ -0,0 +1,9 @@
+import { Heading } from '@react-email/components';
+
+export function EmailHeading(props: React.PropsWithChildren) {
+  return (
+    <Heading className="mx-0 p-0 font-sans text-[22px] font-semibold text-[#242424]">
+      {props.children}
+    </Heading>
+  );
+}

packages/email-templates/src/components/wrapper.tsx

@@ -0,0 +1,30 @@
+import { Container } from '@react-email/components';
+
+export function EmailWrapper(
+  props: React.PropsWithChildren<{
+    className?: string;
+  }>,
+) {
+  return (
+    <Container
+      style={{
+        backgroundColor: '#fafafa',
+        margin: 'auto',
+        fontFamily: 'sans-serif',
+        color: '#242424',
+        width: '100%',
+      }}
+    >
+      <Container
+        style={{
+          maxWidth: '720px',
+          backgroundColor: '#fafafa',
+          margin: 'auto',
+        }}
+        className={'mx-auto px-[20px] py-[40px] ' + props.className || ''}
+      >
+        {props.children}
+      </Container>
+    </Container>
+  );
+}