import {
Body,
Container,
Head,
Heading,
Html,
Img,
Link,
Preview,
Text,
} from 'react-email';
interface NotionMagicLinkEmailProps {
loginCode?: string;
}
const baseUrl = process.env.VERCEL_URL
? `https://${process.env.VERCEL_URL}`
: '';
export const NotionMagicLinkEmail = ({
loginCode,
}: NotionMagicLinkEmailProps) => (
Log in with this magic link
Login
Click here to log in with this magic link
Or, copy and paste this temporary login code:
{loginCode}
If you didn't try to login, you can safely ignore this email.
Hint: You can set a permanent password in Settings & members → My
account.
Notion.so
, the all-in-one-workspace
for your notes, tasks, wikis, and databases.
);
NotionMagicLinkEmail.PreviewProps = {
loginCode: 'sparo-ndigo-amurt-secan',
} as NotionMagicLinkEmailProps;
export default NotionMagicLinkEmail;
const main = {
backgroundColor: '#ffffff',
};
const container = {
paddingLeft: '12px',
paddingRight: '12px',
margin: '0 auto',
};
const h1 = {
color: '#333',
fontFamily:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
fontSize: '24px',
fontWeight: 'bold',
margin: '40px 0',
padding: '0',
};
const link = {
color: '#2754C5',
fontFamily:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
fontSize: '14px',
textDecoration: 'underline',
};
const text = {
color: '#333',
fontFamily:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
fontSize: '14px',
margin: '24px 0',
};
const footer = {
color: '#898989',
fontFamily:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
fontSize: '12px',
lineHeight: '22px',
marginTop: '12px',
marginBottom: '24px',
};
const code = {
display: 'inline-block',
padding: '16px 4.5%',
width: '90.5%',
backgroundColor: '#f4f4f4',
borderRadius: '5px',
border: '1px solid #eee',
color: '#333',
};