Forgot to add a file like normal
diff --git a/todo/rolemenu/index.js b/todo/rolemenu/index.js
new file mode 100644
index 0000000..a057f9f
--- /dev/null
+++ b/todo/rolemenu/index.js
@@ -0,0 +1,131 @@
+import Axios from 'axios';
+import Router from 'next/router';
+import React from 'react';
+import Header from '../../Components/Header'
+import { useReward } from 'react-rewards';
+
+import { AutoLayout, Panel, Title, Text, Divider } from '../../Components/Panels';
+import { useColorMode } from 'theme-ui';
+import Styles from '../../../styles/nucleus/rolemenu.module.css';
+
+function RoleMenu(props) {
+ const [clicked, setClicked] = React.useState(false);
+ const [formState, setFormState] = React.useState({});
+ const [theme, setTheme] = useColorMode()
+
+ const { reward: reward, isAnimating: isAnimating } = useReward('confetti', 'confetti', {
+ elementSize: 10,
+ elementCount: 150,
+ startVelocity: 35,
+ lifetime: 300,
+ decay: 0.94,
+ spread: 170,
+ position: "absolute",
+ colors: ["#68D49E"]
+ });
+
+ function handleChange(event) {
+ const { name, value } = event.target;
+ setFormState({ ...formState, [name]: value });
+ }
+
+ async function submitForm() {
+ if (!isAnimating) reward();
+ return
+ let code = await Axios.post('/api/nucleus/rolemenu/complete', {
+ code: props.code
+ });
+ setTimeout(() => {
+ if (code.data.success === true ) return Router.push('/nucleus/rolemenu/success','/nucleus/rolemenu')
+ else return Router.push('/nucleus/rolemenu/failure','/nucleus/rolemenu')
+ }, 2500);
+ }
+
+ return <>
+ <Header
+ name={props.guildName}
+ customImage={props.guildIcon}
+ roundImage={true}
+ subtext={`Welcome, ${props.username}`}
+ gradient={["F27878", "D96B6B"]}
+ wave="web/waves/header/nucleus"
+ buttons={[]}
+ />
+ <form onSubmit={submitForm}>
+ <AutoLayout>
+ {props.data.map((item, index) => {
+ return <Panel key={index} halfSize={true}>
+ <Title>{item.name}</Title>
+ <Divider/>
+ <Text>{item.description}</Text>
+ <div className={Styles.options}>
+ {
+ item.options.map((props, optionIndex) => {return <div className={Styles.optionBox}>
+ <input
+ type={item.max === 1 ? "radio" : "checkbox"}
+ style={{borderRadius: item.max === 1 ? "50%" : "5px"}}
+ className={Styles.option}
+ key={item.name + optionIndex}
+ id={item.name + optionIndex.toString()}
+ name={item.name}
+ value={props.name}
+ onChange={handleChange}
+ />
+ <label htmlFor={item.name + optionIndex.toString()}>{props.name}</label>
+ </div>})
+ }
+ </div>
+ </Panel>
+ })}
+ <Panel halfSize={false}>
+ <Title>Save</Title>
+ <Divider/>
+ <Text>
+ After selecting all your roles, click the button below to save your choices.
+ </Text>
+ <div id="confetti" />
+ <div className={Styles.submit}>
+ <button type="submit" disabled={isAnimating}>
+ {isAnimating ? "Saving..." : "Save"}
+ </button>
+ </div>
+ </Panel>
+ </AutoLayout>
+ </form>
+ </>
+}
+
+export default RoleMenu;
+export async function getServerSideProps(ctx) {
+ if(!ctx.query.code) {
+ return {
+ redirect: {
+ destination: '/nucleus',
+ permanent: true
+ }
+ }
+ }
+ let code;
+ try {
+ code = (await Axios.get(`http://localhost:10000/rolemenu/${ctx.query.code}`)).data;
+ } catch (e) {
+ return {
+ redirect: {
+ destination: '/nucleus/rolemenu/failure',
+ permanent: true
+ }
+ }
+ }
+ let headers = ctx.req.headers;
+ return {
+ props: {
+ guild: code.guild,
+ guildName: code.guildName,
+ guildIcon: code.guildIcon,
+ user: code.user,
+ username: code.username,
+ data: code.data,
+ headers: headers
+ }
+ }
+}
\ No newline at end of file