ContactSupportEmail.tsx 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. import * as React from "react";
  2. import { Body, Container, Head, Heading, Hr, Html, Preview, Section, Text, Tailwind } from "@react-email/components";
  3. interface ContactSupportEmailProps {
  4. email: string;
  5. subject: string;
  6. message: string;
  7. }
  8. const ContactSupportEmail = ({ email, subject, message }: ContactSupportEmailProps) => (
  9. <Html>
  10. <Head />
  11. <Preview>New Contact Request - {subject}</Preview>
  12. <Tailwind>
  13. <Body className="mx-auto my-auto bg-white font-sans">
  14. <Container className="mx-auto my-[40px] w-[465px] rounded border border-solid border-[#eaeaea] p-[20px]">
  15. <Section className="mt-[32px]">
  16. <Heading className="mx-0 my-[30px] p-0 text-center text-[24px] font-normal text-black">New Contact Request</Heading>
  17. <Text className="text-[14px] leading-[24px] text-black">
  18. You received a new message from: <strong>{email}</strong>
  19. </Text>
  20. <Text className="text-[14px] leading-[24px] text-black">
  21. <strong>Subject:</strong> {subject}
  22. </Text>
  23. <Hr className="mx-0 my-[26px] w-full border border-solid border-[#eaeaea]" />
  24. <Text className="text-[14px] leading-[24px] text-black">
  25. <strong>Message:</strong>
  26. </Text>
  27. <Text className="whitespace-pre-wrap text-[14px] leading-[24px] text-black">{message}</Text>
  28. </Section>
  29. </Container>
  30. </Body>
  31. </Tailwind>
  32. </Html>
  33. );
  34. export default ContactSupportEmail;