/
gists.new.tsx
65 lines (60 loc) · 1.52 KB
/
gists.new.tsx
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
import type { LinksFunction } from "@remix-run/node";
import { Form, usePendingFormSubmit } from "@remix-run/react";
// import styles from "url:../styles/gists.new.css";
// export let links: LinksFunction = () => {
// return [{ rel: "stylesheet", href: styles }];
// };
export default function NewGist() {
let pendingForm = usePendingFormSubmit();
return (
<>
<h2>New Gist!</h2>
{pendingForm ? (
<div>
<p>
<Loading /> Creating gist: {pendingForm.data.get("fileName")}
</p>
</div>
) : (
<Form method="post" action="/gists">
<p>
<label>
Gist file name:
<br />
<input required type="text" name="fileName" />
</label>
</p>
<p>
<label>
Content:
<br />
<textarea required rows={10} name="content" />
</label>
</p>
<p>
<button type="submit">Create Gist</button>
</p>
</Form>
)}
</>
);
}
function Loading() {
return (
<svg
className="spin"
style={{ height: "1rem" }}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
/>
</svg>
);
}