@@ -0,0 +1,157 @@
1+import Link from "next/link";
2+import { useState } from "react";
3+import { encode } from "html-entities";
4+import Container from "../../components/Container";
5+import Section from "../../components/Section";
6+import SingleColumn from "../../components/SingleColumn";
7+import { useInputChange } from "../../lib/hooks";
8+
9+const SubmissionPage = () => {
10+ const [form, handleFormChange] = useInputChange();
11+ const [publicGroup, setPublicGroup] = useState(true);
12+
13+ const href = `https://github.com/urbit/urbit.org/new/master?filename=/content/group/${
14+ form?.shortcode
15+ }.md&value=${encodeURIComponent(
16+ `+++
17+title = "${form?.groupName}"
18+shortcode = "${form?.shortcode}"
19+type = "${publicGroup ? "Public" : "Private"}"
20+image = "${form?.imageUrl || ""}"
21+participant_range = "${form?.members || ""}"
22+channels = "${form?.channels || ""}"
23++++
24+
25+${form?.description || ""}`
26+ )}`;
27+
28+ return (
29+ <Container>
30+ <SingleColumn>
31+ <Section narrow className="space-y-12">
32+ <div className="flex flex-col space-y-4">
33+ <h2>Submit your group</h2>
34+ <p>
35+ Groups submissions are accomplished through a GitHub pull request.
36+ </p>
37+ <p>
38+ You’ll need <a href="https://github.com">a GitHub account</a>{" "}
39+ before you get started to submit your group.
40+ </p>
41+ <p>
42+ First, enter your information and then click “Submit with GitHub.”
43+ You’ll be directed to a GitHub pull request page with a
44+ pre-populated markdown file. Click “Propose new file,” and then
45+ “Create pull request” on the following page.
46+ </p>
47+ <p>
48+ Then, to validate that you operate this group, send a DM to{" "}
49+ <Link href="/id/~haddef-sigwen">
50+ <a>~haddef-sigwen</a>
51+ </Link>{" "}
52+ from your group host <code>@p</code> with a link to the pull
53+ request on GitHub. We’ll approve the pull request and your page
54+ will be online shortly.
55+ </p>
56+ </div>
57+ <div className="flex flex-col space-y-4">
58+ <h3>Enter your group information</h3>
59+ <div className="flex flex-col">
60+ <p>Group name (required)</p>
61+ <input
62+ className="bg-wall-100 p-2"
63+ name="groupName"
64+ onChange={handleFormChange}
65+ />
66+ </div>
67+ <div className="flex flex-col">
68+ <p>Group type</p>
69+ <div className="flex space-x-4">
70+ <div
71+ className="flex items-center space-x-2 cursor-pointer"
72+ onClick={() => setPublicGroup(true)}
73+ >
74+ <input
75+ type="radio"
76+ onChange={() => null}
77+ checked={publicGroup}
78+ />
79+ <p>Public</p>
80+ </div>
81+ <div
82+ className="flex items-center space-x-2 cursor-pointer"
83+ onClick={() => setPublicGroup(false)}
84+ >
85+ <input
86+ type="radio"
87+ onChange={() => null}
88+ checked={!publicGroup}
89+ />
90+ <p>Private</p>
91+ </div>
92+ </div>
93+ </div>
94+ <div className="flex flex-col">
95+ <p>
96+ Shortcode (e.g. <code>~bitbet-bolbel/urbit-community</code>)
97+ (required)
98+ </p>
99+ <input
100+ className="bg-wall-100 p-2"
101+ name="shortcode"
102+ onChange={handleFormChange}
103+ />
104+ </div>
105+ <div className="flex flex-col">
106+ <p>Group image URL</p>
107+ <input
108+ className="bg-wall-100 p-2"
109+ name="imageUrl"
110+ onChange={handleFormChange}
111+ />
112+ </div>
113+ <div className="flex flex-col">
114+ <p>
115+ Members (e.g. <code>1000+</code>)
116+ </p>
117+ <input
118+ className="bg-wall-100 p-2"
119+ name="members"
120+ onChange={handleFormChange}
121+ />
122+ </div>
123+ <div className="flex flex-col">
124+ <p>
125+ Channels (e.g. <code>7</code>)
126+ </p>
127+ <input
128+ className="bg-wall-100 p-2"
129+ name="channels"
130+ onChange={handleFormChange}
131+ />
132+ </div>
133+ <div className="flex flex-col">
134+ <p>Description</p>
135+ <textarea
136+ className="resize-none bg-wall-100 p-2 h-60"
137+ name="description"
138+ onChange={handleFormChange}
139+ />
140+ </div>
141+ </div>
142+ <button
143+ className="button-lg bg-wall-600 text-wall-100"
144+ onClick={() => window.open(href)}
145+ >
146+ Submit with GitHub
147+ </button>
148+ <Link href="/">
149+ <a className="text-xl pt-8 block font-semibold">Urbit.org</a>
150+ </Link>
151+ </Section>
152+ </SingleColumn>
153+ </Container>
154+ );
155+};
156+
157+export default SubmissionPage;