riccardo/newsletter-hackernews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: added shadcn-ui

Browse Source
This commit is contained in:
Riccardo
2023-12-05 20:13:29 +01:00
parent 1b0919a460
commit 78de374cba
45 changed files with 1463 additions and 1340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
components/emails/newsletter.tsx
View File

@@ -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'
};

33
components/emails/subscribe.tsx
View File

@@ -1,23 +1,22 @@
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 Email from './template';
export default function SubscribeEmail(code: string) {
return (
<Html>
<Section style={main}>
<Container style={container}>
<Text style={paragraph}>
To confirm the subscription, please click{' '}
export default function ConfirmationEmail(code: string) {
return {
subject: 'Welcome!',
template: (
<Email
title={'Welcome!'}
body={
<>
Thank you for subscribing. Please confirm your email address by
clicking{' '}
<a href={`${process.env.HOME_URL}/confirmation?code=${code}`}>
here
</a>
.
</Text>
</Container>
</Section>
</Html>
);
</>
}
/>
)
};
}

43
components/emails/template.tsx Normal file
View File

@@ -0,0 +1,43 @@
import { Container } from '@react-email/container';
import { Html } from '@react-email/html';
import { Section } from '@react-email/section';
import { Text } from '@react-email/text';
type EmailProps = {
title: string;
body: JSX.Element;
};
export default function Email({ title, body }: EmailProps) {
return (
<Html>
<Section style={main}>
<Container style={container}>
<Text style={heading}>{title}</Text>
<Text style={paragraph}>{body}</Text>
</Container>
</Section>
</Html>
);
}
const main = {
backgroundColor: '#ffffff',
};
const container = {
margin: '0 auto',
padding: '20px 0 48px',
width: '580px',
};
const heading = {
fontSize: '24px',
fontWeight: 'bold',
marginBottom: '16px',
};
const paragraph = {
fontSize: '16px',
marginBottom: '16px',
};

28
components/emails/unsubscribe.tsx
View File

@@ -1,19 +1,13 @@
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 Email from './template';
export default function UnsubscribeEmail() {
return (
<Html>
<Section style={main}>
<Container style={container}>
<Text style={paragraph}>
You have unsubscribed from the newsletter.
</Text>
</Container>
</Section>
</Html>
);
export default function UnsubscribeTemplate() {
return {
subject: 'Unsubscribe confirmation',
template: (
<Email
title="We're sad you're leaving :("
body={<>You have unsubscribed from the newsletter.</>}
/>
),
};
}

15
components/emails/utils/styling.ts
View File

@@ -1,15 +0,0 @@
export const main = {
backgroundColor: '#ffffff'
};
export const container = {
margin: '0 auto',
padding: '20px 0 48px',
width: '580px'
};
export const paragraph = {
fontSize: '18px',
lineHeight: '1.4',
color: '#484848'
};