Merge pull request #104 from debatecore/64-add-a-main-menu-button-in-motion-generator

[64] add a main menu button to the motion generator

Author: jakubmanczak

src/components/MotionGenerator.tsx

@@ -10,6 +10,9 @@ import { useRouter } from "next/navigation";
 import { MotionDisplay } from "./MotionDisplay";
 import { MotionsFilter } from "./MotionsFilter";
 import { useLang } from "@/lib/useLang";
+import { LinkButton } from "./LinkButton";
+import { IconPlayCircle } from "./icons/PlayCircle";
+import { IconList } from "./icons/List";
 
 const MotionGenerator = () => {
   const [motion, setMotion] = useState<motion | null>(null);
@@ -18,7 +21,10 @@ const MotionGenerator = () => {
 
   function generateMotion(): motion {
     const filteredMotions = motions.filter((motion) => {
-      return motion.type && enabledMotionTypes.includes(motion.type as motionTypeCode);
+      return (
+        motion.type &&
+        enabledMotionTypes.includes(motion.type as motionTypeCode)
+      );
     });
     return filteredMotions[Math.floor(Math.random() * filteredMotions.length)];
   }
@@ -30,9 +36,9 @@ const MotionGenerator = () => {
     });
   }
 
-  const [enabledMotionTypes, setEnabledMotionTypes] = useState<motionTypeCode[]>([
-    ...motionTypesArray,
-  ]);
+  const [enabledMotionTypes, setEnabledMotionTypes] = useState<
+    motionTypeCode[]
+  >([...motionTypesArray]);
 
   /** Calls {@link generateMotion()} on page load. */
   useEffect(() => {
@@ -61,6 +67,7 @@ const MotionGenerator = () => {
             router.push("/oxford-debate/setup");
           }}
         />
+        <LinkButton href="/" text={useLang("mainMenu")} icon={IconList} />
       </section>
       <hr className="border-b-2 mt-8 mb-8 rounded border-neutral-800 my-2 w-full" />
       <section className="flex flex-col xl:flex-row items-center">
@@ -79,8 +86,10 @@ const MotionGenerator = () => {
               router.push("/oxford-debate/setup");
             }}
           />
+          <LinkButton href="/" text={useLang("mainMenu")} icon={IconList} />
         </section>
         <MotionDisplay motion={motion} />
+        <div className="flex flex-row flex-wrap justify-center gap-2"></div>
       </section>
     </div>
   );