Skip to content

Commit 7f12225

Browse files
cpennedcpenned
committed
feat: add dub link
1 parent 8d391c2 commit 7f12225

File tree

3 files changed

+306
-306
lines changed

3 files changed

+306
-306
lines changed

‎apps/web/src/components/footer.tsx‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
import Image from 'next/image';
2-
import { Anchor } from './anchor';
3-
import { Text } from './text';
1+
import Image from "next/image";
2+
import { Anchor } from "./anchor";
3+
import { Text } from "./text";
44

55
export function Footer() {
6-
return (
7-
<footer className="flex min-h-20 items-center justify-center text-center">
8-
<Text className="inline-flex items-center gap-2">
9-
Brought to you by{' '}
10-
<Anchor
11-
className="inline-flex items-center gap-2"
12-
href="https://resend.com"
13-
target="_blank"
14-
rel="noopener noreferrer"
15-
>
16-
<Image
17-
alt=""
18-
className="inline-block rounded-full border border-slate-7"
19-
height="20"
20-
src="/brand/resend.png"
21-
width="20"
22-
/>
23-
Resend
24-
</Anchor>
25-
</Text>
26-
</footer>
27-
);
6+
return (
7+
<footer className="flex min-h-20 items-center justify-center text-center">
8+
<Text className="inline-flex items-center gap-2">
9+
Brought to you by{" "}
10+
<Anchor
11+
className="inline-flex items-center gap-2"
12+
href="https://go.resend.com/react-email"
13+
target="_blank"
14+
rel="noopener noreferrer"
15+
>
16+
<Image
17+
alt=""
18+
className="inline-block rounded-full border border-slate-7"
19+
height="20"
20+
src="/brand/resend.png"
21+
width="20"
22+
/>
23+
Resend
24+
</Anchor>
25+
</Text>
26+
</footer>
27+
);
2828
}

‎apps/web/src/components/send.tsx‎

Lines changed: 148 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,159 +1,159 @@
1-
import * as Popover from '@radix-ui/react-popover';
2-
import classNames from 'classnames';
3-
import * as React from 'react';
4-
import { toast } from 'sonner';
5-
import { Button } from './button';
6-
import { Text } from './text';
1+
import * as Popover from "@radix-ui/react-popover";
2+
import classNames from "classnames";
3+
import * as React from "react";
4+
import { toast } from "sonner";
5+
import { Button } from "./button";
6+
import { Text } from "./text";
77

8-
interface SendProps extends React.ComponentProps<'button'> {
9-
markup: string;
10-
defaultSubject?: string;
8+
interface SendProps extends React.ComponentProps<"button"> {
9+
markup: string;
10+
defaultSubject?: string;
1111
}
1212

1313
export const Send = ({
14-
markup,
15-
defaultSubject,
16-
className,
17-
...rest
14+
markup,
15+
defaultSubject,
16+
className,
17+
...rest
1818
}: SendProps) => {
19-
const [to, setTo] = React.useState('');
20-
const [subject, setSubject] = React.useState(defaultSubject ?? '');
21-
const [isSending, setIsSending] = React.useState(false);
22-
const [isPopOverOpen, setIsPopOverOpen] = React.useState(false);
19+
const [to, setTo] = React.useState("");
20+
const [subject, setSubject] = React.useState(defaultSubject ?? "");
21+
const [isSending, setIsSending] = React.useState(false);
22+
const [isPopOverOpen, setIsPopOverOpen] = React.useState(false);
2323

24-
const onFormSubmit = async (e: React.FormEvent) => {
25-
try {
26-
e.preventDefault();
27-
setIsSending(true);
24+
const onFormSubmit = async (e: React.FormEvent) => {
25+
try {
26+
e.preventDefault();
27+
setIsSending(true);
2828

29-
const response = await fetch('https://react.email/api/send/test', {
30-
method: 'POST',
31-
headers: { 'Content-Type': 'application/json' },
32-
body: JSON.stringify({
33-
to,
34-
subject,
35-
html: markup,
36-
}),
37-
});
29+
const response = await fetch("https://react.email/api/send/test", {
30+
method: "POST",
31+
headers: { "Content-Type": "application/json" },
32+
body: JSON.stringify({
33+
to,
34+
subject,
35+
html: markup,
36+
}),
37+
});
3838

39-
if (response.ok) {
40-
toast.success('Email sent! Check your inbox.');
41-
} else {
42-
if (response.status === 429) {
43-
const { error } = (await response.json()) as { error: string };
44-
console.error(error);
45-
toast.error(
46-
'Too many test emails were sent, try again in a few seconds.',
47-
);
48-
} else {
49-
toast.error('Something went wrong. Please try again.');
50-
}
51-
}
52-
} catch (_exception) {
53-
toast.error('Something went wrong. Please try again.');
54-
} finally {
55-
setIsSending(false);
56-
}
57-
};
39+
if (response.ok) {
40+
toast.success("Email sent! Check your inbox.");
41+
} else {
42+
if (response.status === 429) {
43+
const { error } = (await response.json()) as { error: string };
44+
console.error(error);
45+
toast.error(
46+
"Too many test emails were sent, try again in a few seconds.",
47+
);
48+
} else {
49+
toast.error("Something went wrong. Please try again.");
50+
}
51+
}
52+
} catch (_exception) {
53+
toast.error("Something went wrong. Please try again.");
54+
} finally {
55+
setIsSending(false);
56+
}
57+
};
5858

59-
const toId = React.useId();
60-
const subjectId = React.useId();
59+
const toId = React.useId();
60+
const subjectId = React.useId();
6161

62-
return (
63-
<Popover.Root
64-
onOpenChange={() => {
65-
if (!isPopOverOpen) {
66-
document.body.classList.add('popup-open');
67-
setIsPopOverOpen(true);
68-
} else {
69-
document.body.classList.remove('popup-open');
70-
setIsPopOverOpen(false);
71-
}
72-
}}
73-
open={isPopOverOpen}
74-
>
75-
<Popover.Trigger asChild>
76-
<button
77-
type="submit"
78-
{...rest}
79-
className={classNames(
80-
'flex items-center justify-center self-center rounded-lg bg-slate-6 border border-solid border-transparent px-3 py-1 h-full text-center font-sans text-sm text-slate-11 outline-none transition duration-300 ease-in-out hover:text-slate-12',
81-
className,
82-
)}
83-
>
84-
Send
85-
</button>
86-
</Popover.Trigger>
87-
<Popover.Anchor />
88-
<Popover.Portal>
89-
<Popover.Content
90-
align="end"
91-
className="-mt-10 w-80 rounded-lg border border-slate-6 bg-black/70 p-3 text-slate-11 shadow-md backdrop-blur-lg font-sans z-[3]"
92-
sideOffset={48}
93-
>
94-
<form className="mt-1" onSubmit={(e) => void onFormSubmit(e)}>
95-
<label
96-
className="mb-2 block text-xs uppercase text-slate-10"
97-
htmlFor={toId}
98-
>
99-
Recipient
100-
</label>
101-
<input
102-
autoFocus
103-
className="mb-3 w-full appearance-none rounded-lg border border-slate-6 bg-slate-3 px-2 py-1 text-sm text-slate-12 placeholder-slate-10 outline-none transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
104-
defaultValue={to}
105-
id={toId}
106-
onChange={(e) => {
107-
setTo(e.target.value);
108-
}}
109-
placeholder="you@example.com"
110-
required
111-
type="email"
112-
/>
113-
<label
114-
className="mb-2 mt-1 block text-xs uppercase text-slate-10"
115-
htmlFor={subjectId}
116-
>
117-
Subject
118-
</label>
119-
<input
120-
className="mb-3 w-full appearance-none rounded-lg border border-slate-6 bg-slate-3 px-2 py-1 text-sm text-slate-12 placeholder-slate-10 outline-none transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
121-
defaultValue={subject}
122-
id={subjectId}
123-
onChange={(e) => {
124-
setSubject(e.target.value);
125-
}}
126-
placeholder="My Email"
127-
required
128-
type="text"
129-
/>
130-
<input
131-
className="appearance-none checked:bg-blue-500"
132-
type="checkbox"
133-
/>
134-
<div className="mt-3 flex items-center justify-between">
135-
<Text className="inline-block" size="1">
136-
Powered by{' '}
137-
<a
138-
className="text-white/85 transition duration-300 ease-in-out hover:text-slate-12"
139-
href="https://resend.com"
140-
rel="noreferrer"
141-
target="_blank"
142-
>
143-
Resend
144-
</a>
145-
</Text>
146-
<Button
147-
className="disabled:border-transparent disabled:bg-slate-11"
148-
disabled={subject.length === 0 || to.length === 0 || isSending}
149-
type="submit"
150-
>
151-
Send
152-
</Button>
153-
</div>
154-
</form>
155-
</Popover.Content>
156-
</Popover.Portal>
157-
</Popover.Root>
158-
);
62+
return (
63+
<Popover.Root
64+
onOpenChange={() => {
65+
if (!isPopOverOpen) {
66+
document.body.classList.add("popup-open");
67+
setIsPopOverOpen(true);
68+
} else {
69+
document.body.classList.remove("popup-open");
70+
setIsPopOverOpen(false);
71+
}
72+
}}
73+
open={isPopOverOpen}
74+
>
75+
<Popover.Trigger asChild>
76+
<button
77+
type="submit"
78+
{...rest}
79+
className={classNames(
80+
"flex items-center justify-center self-center rounded-lg bg-slate-6 border border-solid border-transparent px-3 py-1 h-full text-center font-sans text-sm text-slate-11 outline-none transition duration-300 ease-in-out hover:text-slate-12",
81+
className,
82+
)}
83+
>
84+
Send
85+
</button>
86+
</Popover.Trigger>
87+
<Popover.Anchor />
88+
<Popover.Portal>
89+
<Popover.Content
90+
align="end"
91+
className="-mt-10 w-80 rounded-lg border border-slate-6 bg-black/70 p-3 text-slate-11 shadow-md backdrop-blur-lg font-sans z-[3]"
92+
sideOffset={48}
93+
>
94+
<form className="mt-1" onSubmit={(e) => void onFormSubmit(e)}>
95+
<label
96+
className="mb-2 block text-xs uppercase text-slate-10"
97+
htmlFor={toId}
98+
>
99+
Recipient
100+
</label>
101+
<input
102+
autoFocus
103+
className="mb-3 w-full appearance-none rounded-lg border border-slate-6 bg-slate-3 px-2 py-1 text-sm text-slate-12 placeholder-slate-10 outline-none transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
104+
defaultValue={to}
105+
id={toId}
106+
onChange={(e) => {
107+
setTo(e.target.value);
108+
}}
109+
placeholder="you@example.com"
110+
required
111+
type="email"
112+
/>
113+
<label
114+
className="mb-2 mt-1 block text-xs uppercase text-slate-10"
115+
htmlFor={subjectId}
116+
>
117+
Subject
118+
</label>
119+
<input
120+
className="mb-3 w-full appearance-none rounded-lg border border-slate-6 bg-slate-3 px-2 py-1 text-sm text-slate-12 placeholder-slate-10 outline-none transition duration-300 ease-in-out focus:ring-1 focus:ring-slate-10"
121+
defaultValue={subject}
122+
id={subjectId}
123+
onChange={(e) => {
124+
setSubject(e.target.value);
125+
}}
126+
placeholder="My Email"
127+
required
128+
type="text"
129+
/>
130+
<input
131+
className="appearance-none checked:bg-blue-500"
132+
type="checkbox"
133+
/>
134+
<div className="mt-3 flex items-center justify-between">
135+
<Text className="inline-block" size="1">
136+
Powered by{" "}
137+
<a
138+
className="text-white/85 transition duration-300 ease-in-out hover:text-slate-12"
139+
href="https://go.resend.com/react-email"
140+
rel="noreferrer"
141+
target="_blank"
142+
>
143+
Resend
144+
</a>
145+
</Text>
146+
<Button
147+
className="disabled:border-transparent disabled:bg-slate-11"
148+
disabled={subject.length === 0 || to.length === 0 || isSending}
149+
type="submit"
150+
>
151+
Send
152+
</Button>
153+
</div>
154+
</form>
155+
</Popover.Content>
156+
</Popover.Portal>
157+
</Popover.Root>
158+
);
159159
};

0 commit comments

Comments
 (0)