Skip to main content
Glama
MagicLinkEmail.tsx8.12 kB
import { Body, Button, Container, Head, Heading, Hr, Html, Img, Link, Preview, Section, Tailwind, Text, } from '@react-email/components'; export type MagicLinkEmailProps = { username: string; magicLink: string; }; export const MagicLinkEmailEN = ({ username, magicLink, }: MagicLinkEmailProps) => { const previewText = `Sign in to Intlayer`; return ( <Html> <Head /> <Preview>{previewText}</Preview> <Tailwind> <Body className="m-auto px-2 font-sans"> <Container className="mx-auto my-[40px] max-w-[465px] rounded-xl border border-[#eaeaea] border-solid bg-white p-[20px]"> <Section className="mt-[32px]"> <Img src="https://intlayer.org/apple-touch-icon.png" width="40" height="37" alt="Intlayer" className="mx-auto my-0" /> </Section> <Heading className="mx-0 my-[30px] p-0 text-center font-normal text-[24px] text-black"> Sign in to <strong>Intlayer</strong> </Heading> <Text className="text-[14px] text-black leading-[24px]"> Hello {username}, </Text> <Text className="text-[14px] text-black leading-[24px]"> Click the button below to sign in to your{' '} <strong>Intlayer</strong> account. This link will expire in 10 minutes. </Text> <Section className="my-[32px] text-center"> <Button className="rounded-md bg-[#000000] px-5 py-3 text-center font-semibold text-[12px] text-white no-underline" href={magicLink} > Sign In </Button> </Section> <Text className="text-[14px] text-black leading-[24px]"> or copy and paste this URL into your browser: </Text> <Link href={magicLink} className="text-[#8a8a8a] text-[10px] no-underline" > {magicLink} </Link> <Hr className="mx-0 my-[26px] w-full border border-[#eaeaea] border-solid" /> <Text className="text-[#666666] text-[12px] leading-[24px]"> This sign-in link was intended for{' '} <span className="text-black">{username}</span>. If you did not request this link, you can safely ignore this email. If you are concerned about your account's safety, please reply to this email to get in touch with us. </Text> </Container> </Body> </Tailwind> </Html> ); }; export const MagicLinkEmailFR = ({ username, magicLink, }: MagicLinkEmailProps) => { const previewText = `Connectez-vous à Intlayer`; return ( <Html> <Head /> <Preview>{previewText}</Preview> <Tailwind> <Body className="m-auto px-2 font-sans"> <Container className="mx-auto my-[40px] max-w-[465px] rounded-xl border border-[#eaeaea] border-solid bg-white p-[20px]"> <Section className="mt-[32px]"> <Img src="https://intlayer.org/apple-touch-icon.png" width="40" height="37" alt="Intlayer" className="mx-auto my-0" /> </Section> <Heading className="mx-0 my-[30px] p-0 text-center font-normal text-[24px] text-black"> Connectez-vous à <strong>Intlayer</strong> </Heading> <Text className="text-[14px] text-black leading-[24px]"> Bonjour {username}, </Text> <Text className="text-[14px] text-black leading-[24px]"> Cliquez sur le bouton ci-dessous pour vous connecter à votre compte <strong>Intlayer</strong>. Ce lien expirera dans 10 minutes. </Text> <Section className="my-[32px] text-center"> <Button className="rounded-md bg-[#000000] px-5 py-3 text-center font-semibold text-[12px] text-white no-underline" href={magicLink} > Se connecter </Button> </Section> <Text className="text-[14px] text-black leading-[24px]"> ou copiez et collez cette URL dans votre navigateur : </Text> <Link href={magicLink} className="text-[#8a8a8a] text-[10px] no-underline" > {magicLink} </Link> <Hr className="mx-0 my-[26px] w-full border border-[#eaeaea] border-solid" /> <Text className="text-[#666666] text-[12px] leading-[24px]"> Ce lien de connexion était destiné à{' '} <span className="text-black">{username}</span>. Si vous n'avez pas demandé ce lien, vous pouvez ignorer cet email en toute sécurité. Si vous êtes préoccupé par la sécurité de votre compte, veuillez répondre à cet email pour nous contacter. </Text> </Container> </Body> </Tailwind> </Html> ); }; export const MagicLinkEmailES = ({ username, magicLink, }: MagicLinkEmailProps) => { const previewText = `Inicia sesión en Intlayer`; return ( <Html> <Head /> <Preview>{previewText}</Preview> <Tailwind> <Body className="m-auto px-2 font-sans"> <Container className="mx-auto my-[40px] max-w-[465px] rounded-xl border border-[#eaeaea] border-solid bg-white p-[20px]"> <Section className="mt-[32px]"> <Img src="https://intlayer.org/apple-touch-icon.png" width="40" height="37" alt="Intlayer" className="mx-auto my-0" /> </Section> <Heading className="mx-0 my-[30px] p-0 text-center font-normal text-[24px] text-black"> Inicia sesión en <strong>Intlayer</strong> </Heading> <Text className="text-[14px] text-black leading-[24px]"> Hola {username}, </Text> <Text className="text-[14px] text-black leading-[24px]"> Haz clic en el botón de abajo para iniciar sesión en tu cuenta de{' '} <strong>Intlayer</strong>. Este enlace expirará en 10 minutos. </Text> <Section className="my-[32px] text-center"> <Button className="rounded-md bg-[#000000] px-5 py-3 text-center font-semibold text-[12px] text-white no-underline" href={magicLink} > Iniciar Sesión </Button> </Section> <Text className="text-[14px] text-black leading-[24px]"> o copia y pega esta URL en tu navegador: </Text> <Link href={magicLink} className="text-[#8a8a8a] text-[10px] no-underline" > {magicLink} </Link> <Hr className="mx-0 my-[26px] w-full border border-[#eaeaea] border-solid" /> <Text className="text-[#666666] text-[12px] leading-[24px]"> Este enlace de inicio de sesión estaba destinado a{' '} <span className="text-black">{username}</span>. Si no solicitaste este enlace, puedes ignorar este correo de forma segura. Si estás preocupado por la seguridad de tu cuenta, por favor responde a este correo para ponerte en contacto con nosotros. </Text> </Container> </Body> </Tailwind> </Html> ); }; const PreviewProps: MagicLinkEmailProps = { username: 'alanturing', magicLink: 'https://intlayer.org/auth/magic-link/verify?token=foo', }; MagicLinkEmailEN.PreviewProps = PreviewProps; MagicLinkEmailFR.PreviewProps = PreviewProps; MagicLinkEmailES.PreviewProps = PreviewProps;

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/aymericzip/intlayer'

If you have feedback or need assistance with the MCP directory API, please join our Discord server