1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
// @ts-nocheck
import React from "react"
import { Img, Row, Html, Link, Body, Head, Button, Column, Preview, Section, Container } from "@jsx-email/all"
import { Hr, Text, Fonts, SplitString, Title, A, Span } from "../components"
import {
unit,
body,
code,
frame,
medium,
heading,
container,
headingHr,
footerLink,
breadcrumb,
compactText,
buttonPrimary,
breadcrumbColonSeparator,
} from "../styles"
const LOCAL_ASSETS_URL = "/static"
const CONSOLE_URL = "https://opencode.ai/"
const DOC_URL = "https://opencode.ai/docs/zen"
interface InviteEmailProps {
workspace: string
assetsUrl: string
}
export const InviteEmail = ({ workspace, assetsUrl = LOCAL_ASSETS_URL }: InviteEmailProps) => {
const subject = `Join the ${workspace} workspace`
const messagePlain = `You've been invited to join the ${workspace} workspace in the OpenCode Zen Console.`
const url = `${CONSOLE_URL}workspace/${workspace}`
return (
<Html lang="en">
<Head>
<Title>{`OpenCode Zen — ${messagePlain}`}</Title>
</Head>
<Fonts assetsUrl={assetsUrl} />
<Preview>{messagePlain}</Preview>
<Body style={body} id={Math.random().toString()}>
<Container style={container}>
<Section style={frame}>
<Row>
<Column>
<A href={CONSOLE_URL}>
<Img height="32" alt="OpenCode Zen Logo" src={`${assetsUrl}/zen-logo.png`} />
</A>
</Column>
<Column align="right">
<Button style={buttonPrimary} href={url}>
<Span style={code}>Join Workspace</Span>
</Button>
</Column>
</Row>
<Row style={headingHr}>
<Column>
<Hr />
</Column>
</Row>
<Section>
<Text style={{ ...compactText, ...breadcrumb }}>
<Span>OpenCode Zen</Span>
<Span style={{ ...code, ...breadcrumbColonSeparator }}>:</Span>
<Span>{workspace}</Span>
</Text>
<Text style={{ ...heading, ...compactText }}>
<Link href={url}>
<SplitString text={subject} split={40} />
</Link>
</Text>
</Section>
<Section style={{ padding: `${unit}px 0 0 0` }}>
<Text style={{ ...compactText }}>
You've been invited to join the{" "}
<Link style={medium} href={url}>
{workspace}
</Link>{" "}
workspace in the{" "}
<Link style={medium} href={CONSOLE_URL}>
OpenCode Zen Console
</Link>
.
</Text>
</Section>
<Row style={headingHr}>
<Column>
<Hr />
</Column>
</Row>
<Row>
<Column>
<Link href={CONSOLE_URL} style={footerLink}>
Console
</Link>
</Column>
<Column align="right">
<Link style={footerLink} href={DOC_URL}>
About
</Link>
</Column>
</Row>
</Section>
</Container>
</Body>
</Html>
)
}
export default InviteEmail
|
