InviteEmail.tsx 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. // @ts-nocheck
  2. import React from "react"
  3. import { Img, Row, Html, Link, Body, Head, Button, Column, Preview, Section, Container } from "@jsx-email/all"
  4. import { Text, Fonts, Title, A, Span } from "../components"
  5. import {
  6. unit,
  7. body,
  8. frame,
  9. headingText,
  10. container,
  11. contentText,
  12. button,
  13. contentHighlightText,
  14. linkText,
  15. buttonText,
  16. } from "../styles"
  17. const CONSOLE_URL = "https://opencode.ai/"
  18. interface InviteEmailProps {
  19. inviter: string
  20. workspaceID: string
  21. workspaceName: string
  22. assetsUrl: string
  23. }
  24. export const InviteEmail = ({
  25. inviter = "[email protected]",
  26. workspaceID = "wrk_01K6XFY7V53T8XN0A7X8G9BTN3",
  27. workspaceName = "anomaly",
  28. assetsUrl = `${CONSOLE_URL}email`,
  29. }: InviteEmailProps) => {
  30. const messagePlain = `${inviter} invited you to join the ${workspaceName} workspace.`
  31. const url = `${CONSOLE_URL}workspace/${workspaceID}`
  32. return (
  33. <Html lang="en">
  34. <Head>
  35. <Title>{`OpenCode — ${messagePlain}`}</Title>
  36. </Head>
  37. <Fonts assetsUrl={assetsUrl} />
  38. <Preview>{messagePlain}</Preview>
  39. <Body style={body} id={Math.random().toString()}>
  40. <Container style={container}>
  41. <Section style={frame}>
  42. <Row>
  43. <Column>
  44. <A href={`${CONSOLE_URL}zen`}>
  45. <Img height="32" alt="OpenCode Logo" src={`${assetsUrl}/logo.png`} />
  46. </A>
  47. </Column>
  48. </Row>
  49. <Section style={{ padding: `${unit * 2}px 0 0 0` }}>
  50. <Text style={headingText}>Join your team's OpenCode workspace</Text>
  51. <Text style={contentText}>
  52. You have been invited by <Span style={contentHighlightText}>{inviter}</Span> to join the{" "}
  53. <Span style={contentHighlightText}>{workspaceName}</Span> workspace on OpenCode.
  54. </Text>
  55. </Section>
  56. <Section style={{ padding: `${unit}px 0 0 0` }}>
  57. <Button style={button} href={url}>
  58. <Text style={buttonText}>
  59. Join workspace
  60. <Img width="24" height="24" src={`${assetsUrl}/right-arrow.png`} alt="Arrow right" />
  61. </Text>
  62. </Button>
  63. </Section>
  64. <Section style={{ padding: `${unit}px 0 0 0` }}>
  65. <Text style={contentText}>Button not working? Copy the following link...</Text>
  66. <Link href={url}>
  67. <Text style={linkText}>{url}</Text>
  68. </Link>
  69. </Section>
  70. </Section>
  71. </Container>
  72. </Body>
  73. </Html>
  74. )
  75. }
  76. export default InviteEmail