refactor: use react email for email templates (#734)

Co-authored-by: Alessandro (Ale) Segala <43508+ItalyPaleAle@users.noreply.github.com>
Co-authored-by: Elias Schneider <login@eliasschneider.com>

email-templates/components/card-header.tsx

@@ -0,0 +1,38 @@
+import { Column, Heading, Row, Text } from "@react-email/components";
+
+export default function CardHeader({
+  title,
+  warning,
+}: {
+  title: string;
+  warning?: boolean;
+}) {
+  return (
+    <Row>
+      <Column>
+        <Heading as="h1" style={titleStyle}>
+          {title}
+        </Heading>
+      </Column>
+      <Column align="right">
+        {warning && <Text style={warningStyle}>Warning</Text>}
+      </Column>
+    </Row>
+  );
+}
+
+const titleStyle = {
+  fontSize: "20px",
+  fontWeight: "bold" as const,
+  margin: 0,
+};
+
+const warningStyle = {
+  backgroundColor: "#ffd966",
+  color: "#7f6000",
+  padding: "1px 12px",
+  borderRadius: "50px",
+  fontSize: "12px",
+  display: "inline-block",
+  margin: 0,
+};