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/emails/api-key-expiring-soon.tsx

@@ -0,0 +1,55 @@
+import { Text } from "@react-email/components";
+import { BaseTemplate } from "../components/base-template";
+import CardHeader from "../components/card-header";
+import { sharedPreviewProps, sharedTemplateProps } from "../props";
+
+interface ApiKeyExpiringData {
+  name: string;
+  apiKeyName: string;
+  expiresAt: string;
+}
+
+interface ApiKeyExpiringEmailProps {
+  logoURL: string;
+  appName: string;
+  data: ApiKeyExpiringData;
+}
+
+export const ApiKeyExpiringEmail = ({
+  logoURL,
+  appName,
+  data,
+}: ApiKeyExpiringEmailProps) => (
+  <BaseTemplate logoURL={logoURL} appName={appName}>
+    <CardHeader title="API Key Expiring Soon" warning />
+    <Text>
+      Hello {data.name}, <br />
+      This is a reminder that your API key <strong>
+        {data.apiKeyName}
+      </strong>{" "}
+      will expire on <strong>{data.expiresAt}</strong>.
+    </Text>
+
+    <Text>Please generate a new API key if you need continued access.</Text>
+  </BaseTemplate>
+);
+
+export default ApiKeyExpiringEmail;
+
+ApiKeyExpiringEmail.TemplateProps = {
+  ...sharedTemplateProps,
+  data: {
+    name: "{{.Data.Name}}",
+    apiKeyName: "{{.Data.APIKeyName}}",
+    expiresAt: '{{.Data.ExpiresAt.Format "2006-01-02 15:04:05 MST"}}',
+  },
+};
+
+ApiKeyExpiringEmail.PreviewProps = {
+  ...sharedPreviewProps,
+  data: {
+    name: "Elias Schneider",
+    apiKeyName: "My API Key",
+    expiresAt: "September 30, 2024",
+  },
+};