From 8c929e668553869183a8ea1eafa5e6db122554ad Mon Sep 17 00:00:00 2001
From: gbuomprisco <giancarlopsk@gmail.com>
Date: Fri, 21 Jun 2024 17:00:38 +0800
Subject: [PATCH] Add new email components: Content and Header

Two new functionalities for email templates have been introduced. A 'content' component which provides a container complete with border and padding specifications, and a 'header' component which simply encapsulates its child items. Both use the '@react-email/components' container for layout.
---
 .../src/components/content.tsx                | 19 +++++++++++++++++++
 .../email-templates/src/components/header.tsx | 10 ++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 packages/email-templates/src/components/content.tsx
 create mode 100644 packages/email-templates/src/components/header.tsx

diff --git a/packages/email-templates/src/components/content.tsx b/packages/email-templates/src/components/content.tsx
new file mode 100644
index 000000000..3a2e845e5
--- /dev/null
+++ b/packages/email-templates/src/components/content.tsx
@@ -0,0 +1,19 @@
+import { Container } from '@react-email/components';
+import * as React from 'react';
+
+export function EmailContent(
+  props: React.PropsWithChildren<{
+    className?: string;
+  }>,
+) {
+  return (
+    <Container
+      className={
+        'rounded-xl my-[8px] px-[24px] py-[12px] mx-auto border border-solid border-[#eeeeee] ' +
+          props.className || ''
+      }
+    >
+      {props.children}
+    </Container>
+  );
+}
diff --git a/packages/email-templates/src/components/header.tsx b/packages/email-templates/src/components/header.tsx
new file mode 100644
index 000000000..e43b089d8
--- /dev/null
+++ b/packages/email-templates/src/components/header.tsx
@@ -0,0 +1,10 @@
+import { Container } from '@react-email/components';
+import * as React from 'react';
+
+export function EmailHeader(props: React.PropsWithChildren) {
+  return (
+    <Container>
+      {props.children}
+    </Container>
+  );
+}