style: added shadcn-ui

2023-12-05 20:13:29 +01:00
parent 1b0919a460
commit 78de374cba
45 changed files with 1463 additions and 1340 deletions
--- a/components/emails/newsletter.tsx
+++ b/components/emails/newsletter.tsx
@@ -2,18 +2,65 @@ import { Container } from '@react-email/container';
 import { Html } from '@react-email/html';
 import { Section } from '@react-email/section';
 import { Text } from '@react-email/text';
-import { container, main, paragraph } from './utils/styling';
+import { z } from 'zod';
+import { NewsSchema } from '../../utils/types';

-export default function NewsletterEmail(ids: number[]) {
-  return (
-    <Html>
-      <Section style={main}>
-        <Container style={container}>
-          <Text style={paragraph}>
-            These were the ids retrieved: {ids.join(', ')}
-          </Text>
-        </Container>
-      </Section>
-    </Html>
-  );
+export default function NewsletterTemplate(
+  stories: z.infer<typeof NewsSchema>[]
+) {
+  return {
+    subject: `What's new from Hackernews?`,
+    template: (
+      <Html>
+        <Section style={main}>
+          <Container style={container}>
+            <Text style={paragraph}>
+              {stories.map(story => {
+                return (
+                  <div
+                    key={story.id}
+                    style={{
+                      padding: '10px',
+                      border: '1px solid #ccc',
+                      boxShadow: '2px 2px 5px rgba(0, 0, 0, 0.1)'
+                    }}
+                  >
+                    <h1>{story.title}</h1>
+                    <p>{story.by}</p>
+                    {story.text && (
+                      <p
+                        dangerouslySetInnerHTML={{
+                          __html:
+                            story.text.length > 500
+                              ? story.text.substring(0, 500) + '...'
+                              : story.text
+                        }}
+                      />
+                    )}
+                    {story.url && <a href={story.url}>Read more</a>}
+                  </div>
+                );
+              })}
+            </Text>
+          </Container>
+        </Section>
+      </Html>
+    )
+  };
 }
+
+const main = {
+  backgroundColor: '#ffffff'
+};
+
+const container = {
+  margin: '0 auto',
+  padding: '20px 0 48px',
+  width: '580px'
+};
+
+const paragraph = {
+  fontSize: '18px',
+  lineHeight: '1.4',
+  color: '#484848'
+};