feat: Added platform emails for billing limits and disabled projects

2025-12-12 12:28:53 +01:00
parent cb40669385
commit 2485d2ff1d
29 changed files with 768 additions and 67 deletions
@@ -0,0 +1,58 @@
+import {Body, Container, Head, Html, Tailwind} from '@react-email/components';
+import * as React from 'react';
+
+interface EmailLayoutProps {
+  children: React.ReactNode;
+}
+
+const tailwindConfig = {
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          900: '#1e3a8a',
+        },
+      },
+      fontFamily: {
+        sans: [
+          'ui-sans-serif',
+          'system-ui',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'Segoe UI',
+          'Roboto',
+          'Helvetica Neue',
+          'Arial',
+          'sans-serif',
+        ],
+      },
+    },
+  },
+};
+
+export function EmailLayout({children}: EmailLayoutProps) {
+  return (
+    <Tailwind config={tailwindConfig}>
+      <Html>
+        <Head>
+          <meta name="color-scheme" content="light" />
+          <meta name="supported-color-schemes" content="light" />
+        </Head>
+        <Body className="m-0 bg-gray-50 p-0 font-sans antialiased">
+          <Container
+            className="mx-auto my-8 max-w-[600px] overflow-hidden rounded-lg bg-white shadow-sm"
+            style={{border: '1px solid #e5e7eb'}}
+          >
+            {children}
+          </Container>
+        </Body>
+      </Html>
+    </Tailwind>
+  );
+}
@@ -0,0 +1,41 @@
+import {Link, Section, Text} from '@react-email/components';
+import * as React from 'react';
+
+interface FooterProps {
+  projectId?: string;
+  landingUrl?: string;
+}
+
+export function Footer({projectId, landingUrl = 'https://www.useplunk.com'}: FooterProps) {
+  return (
+    <Section className="border-t border-gray-100 bg-gray-50 px-8 py-8">
+      <Text className="mb-4 mt-0 text-center text-xs leading-relaxed text-gray-600">
+        This email was sent by Plunk. .
+      </Text>
+      {projectId && (
+        <Text className="mb-4 mt-0 text-center text-xs leading-relaxed text-gray-400">
+          Project ID: <span className="font-mono">{projectId}</span>
+        </Text>
+      )}
+      <Text className="mb-0 mt-0 text-center text-xs leading-relaxed text-gray-500">
+        <Link href={landingUrl} className="text-gray-500 no-underline hover:text-gray-700">
+          Plunk
+        </Link>
+        {' • '}
+        <Link
+          href={`${landingUrl}/privacy`}
+          className="text-gray-500 no-underline hover:text-gray-700"
+        >
+          Privacy
+        </Link>
+        {' • '}
+        <Link
+          href={`${landingUrl}/terms`}
+          className="text-gray-500 no-underline hover:text-gray-700"
+        >
+          Terms
+        </Link>
+      </Text>
+    </Section>
+  );
+}
@@ -1,10 +1,16 @@
-import {Img} from '@react-email/components';
+import {Img, Section} from '@react-email/components';
 import * as React from 'react';

 export function Header() {
  return (
-    <>
-      <Img src="https://www.swyp.be/favicon/web-app-manifest-192x192.png" alt="Swyp Logo" width="40" height="40" />
-    </>
+    <Section className="border-b border-gray-100 bg-white px-8 py-8">
+      <Img
+        src="https://next.useplunk.com/assets/logo.png"
+        alt="Plunk"
+        width="40"
+        height="40"
+        className="mx-auto"
+      />
+    </Section>
  );
 }