1import "./styles.sass";
2import Button from "@/common/components/Button/index.js";
3import {faHome, faPaperPlane, faCheckCircle, faInfoCircle} from "@fortawesome/free-solid-svg-icons";
4import {useState} from "react";
5import {useLocation, useNavigate} from "react-router-dom";
6import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
7
8const ISSUES_URL = "https://github.com/ikhsanddy/pixies/issues";
9
10export const TutorialSubmission = () => {
11 const location = useLocation();
12 const navigate = useNavigate();
13
14 const typeParam = new URLSearchParams(location.search).get("type");
15
16 const [type, setType] = useState(typeParam || "guide");
17 const [contentUrl, setContentUrl] = useState("");
18 const [message, setMessage] = useState("");
19 const [success, setSuccess] = useState(false);
20 const [agreed, setAgreed] = useState(false);
21
22 const postTutorial = async (ev) => {
23 ev.preventDefault();
24
25 const body = [
26 `**Type:** ${type}`,
27 `**Content URL:** ${contentUrl}`,
28 "",
29 message
30 ].join("\n");
31
32 window.open(
33 `${ISSUES_URL}/new?title=${encodeURIComponent("Tutorial submission")}` +
34 `&body=${encodeURIComponent(body)}`,
35 "_blank"
36 );
37 setSuccess(true);
38 }
39
40 if (success) {
41 return (
42 <div className="submission-page">
43 <div className="success-state">
44 <div className="success-icon">
45 <FontAwesomeIcon icon={faCheckCircle}/>
46 </div>
47 <h1>Submission Started</h1>
48 <p>Your browser opened a pre-filled GitHub issue. Submit it there to finish sharing
49 your {type}.</p>
50 <Button
51 icon={faHome}
52 text="Back to Home"
53 color="primary"
54 onClick={() => navigate("/")}
55 />
56 </div>
57 </div>
58 );
59 }
60
61 return (
62 <div className="submission-page">
63 <div className="submission-container">
64 <div className="submission-header">
65 <h1>Submit a Tutorial</h1>
66 <p>Share your Pixies content with the community</p>
67 </div>
68
69 <div className="submission-content">
70 <form className="submission-form" onSubmit={postTutorial}>
71 <input type="hidden" name="honeypot" style={{display: "none"}}/>
72
73 <div className="form-group">
74 <label htmlFor="type">Content Type</label>
75 <select
76 id="type"
77 value={type}
78 onChange={(e) => setType(e.target.value)}
79 >
80 <option value="guide">Guide</option>
81 <option value="video">Video</option>
82 <option value="blog">Blog Post</option>
83 </select>
84 </div>
85
86 <div className="form-group">
87 <label htmlFor="content-url">Content URL</label>
88 <input
89 type="url"
90 id="content-url"
91 value={contentUrl}
92 onChange={(e) => setContentUrl(e.target.value)}
93 placeholder={type === "blog" ? "https://example.com/your-blog-post" : "https://youtube.com/watch?v=..."}
94 required
95 />
96 </div>
97
98 <div className="form-group">
99 <label htmlFor="message">Additional Notes <span className="optional">(optional)</span></label>
100 <textarea
101 id="message"
102 value={message}
103 onChange={(e) => setMessage(e.target.value)}
104 placeholder="Anything you'd like us to know?"
105 rows={4}
106 />
107 </div>
108
109 <div className="form-checkbox">
110 <input
111 type="checkbox"
112 id="terms"
113 checked={agreed}
114 onChange={(e) => setAgreed(e.target.checked)}
115 required
116 />
117 <label htmlFor="terms">I confirm this is my original content and follows the guidelines</label>
118 </div>
119
120 <Button
121 icon={faPaperPlane}
122 text="Submit Tutorial"
123 color="primary"
124 size="lg"
125 disabled={!agreed}
126 />
127 </form>
128
129 <aside className="guidelines">
130 <div className="guidelines-header">
131 <FontAwesomeIcon icon={faInfoCircle}/>
132 <h3>Submission Guidelines</h3>
133 </div>
134
135 <ul>
136 <li>Submissions are handled as a GitHub issue in the project repository</li>
137 <li>Content must be publicly accessible</li>
138 <li>Must be related to Pixies (tutorial, review, guide, etc.)</li>
139 <li>You must be the original creator of the content</li>
140 </ul>
141 </aside>
142 </div>
143 </div>
144 </div>
145 );
146}
147