divided into diff components

v2/guides/guides.mdx

@@ -9,17 +9,16 @@ slug: /
 Please select a recipe to get started
 :::
 
-import RecipeLayout from "/src/components/recipeBoxes/RecipeLayout"
-import * as guides from "./guides.json"
+import RecipeLayout from "/src/components/recipeBoxes/recipeLayout"
 
 ## Authentication Methods
 
-<RecipeLayout guides={guides["auth_modes"]} cols={3} />
+<RecipeLayout mode="auth_modes" cols={3} />
 
 ## Add-ons
-<RecipeLayout guides={guides["add_ons"]} cols={2} />
+<RecipeLayout mode="add_ons" cols={2} />
 
 ## Reference Docs
-<RecipeLayout guides={guides["ref"]} cols={2} />
+<RecipeLayout mode="ref" cols={2} />
 
 

v2/guides/sidebars.js

@@ -0,0 +1,3 @@
+module.exports = {
+  sidebar: ["guides"],
+};

v2/src/components/recipeBoxes/add_ons.tsx

@@ -0,0 +1,26 @@
+import React, {useState, useEffect} from "react";
+import "./recipeBox.css"
+
+type size = "small" | "large"
+
+export default function Addons(props: { text: string, path: string, icon: string, img?: string }) {
+    const [image, setImage] = useState({default: ""});
+    const [imageOnHover, setImageOnHover] = useState({default: ""});
+    const [hover, setHover] = useState(false);
+    useEffect(() => {
+        setImage(require(`../../../static/img/guides/${props.icon}.svg`));
+        setImageOnHover(require(`../../../static/img/guides/${props.icon}-orange.svg`));
+    },);
+
+    const handleMouseOver = () => {
+        setHover(true);
+    }
+    const handleMouseOut = () => {
+        setHover(false);
+    }
+
+    return <a href={props.path} className={`recipe_box`} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
+        <div className="recipe_box__icon_wrapper" style={{ backgroundImage: `url(${ hover ? imageOnHover.default : image.default})` }}></div>
+        <div className="recipe_box__text">{props.text}</div>
+    </a>
+}

v2/src/components/recipeBoxes/recipeBox.tsx → v2/src/components/recipeBoxes/authMode.tsx

@@ -3,7 +3,7 @@ import "./recipeBox.css"
 
 type size = "small" | "large"
 
-export default function RecipeBox(props: { text: string, size: size, path: string, icon: string, img?: string }) {
+export default function AuthMode(props: { text: string, size: size, path: string, icon: string, img?: string }) {
     const [image, setImage] = useState({default: ""});
     const [imageOnHover, setImageOnHover] = useState({default: ""});
     const [imageToShow, setImageToShow] = useState({default: ""});

v2/src/components/recipeBoxes/recipeLayout.tsx

@@ -1,16 +1,53 @@
 import * as React from "react";
-import RecipeBox from "./recipeBox";
-import "./recipeLayout.css"
+import AuthMode from "./authMode";
+import Addons from "./add_ons";
+import Refs from "./refs";
+import "./recipeLayout.css";
+import * as guides from "./guides.json";
+
+type mode = "auth_modes" | "add_ons" | "ref";
 
 type guide = {
-    title: string,
-    path: string, 
-    icon: string,
-    img?: string,
-}
+  title: string;
+  path: string;
+  icon: string;
+  img?: string;
+};
 
-export default function RecipeLayout(props: { guides: Array<guide>, cols: Number }) {
-    return (<div className="recipe_wrapper" style={{ gridTemplateColumns: `repeat(${props.cols}, 1fr)` }}>
-        {props.guides.map((ele, ind) => <RecipeBox key={ind} text={ele.title} size={props.cols == 3 ? "large" : "small"} path={ele.path} icon={ele.icon} img={ele.img} />)}
-    </div>)
-}
+export default function RecipeLayout(props: { mode: mode }) {
+  return (
+    <div
+      className="recipe_wrapper"
+      style={{ gridTemplateColumns: `repeat(${props.mode === "auth_modes" ? 3 : 2}, 1fr)` }}
+    >
+      {props.mode === "auth_modes" && guides[props.mode].map((ele: guide, ind: number) => (
+        <AuthMode
+          key={ind}
+          text={ele.title}
+          size={"large"}
+          path={ele.path}
+          icon={ele.icon}
+          img={ele.img}
+        />
+      ))}
+      {props.mode === "add_ons" && guides[props.mode].map((ele: guide, ind: number) => (
+        <Addons
+          key={ind}
+          text={ele.title}
+          path={ele.path}
+          icon={ele.icon}
+          img={ele.img}
+        />
+      ))}
+      {props.mode === "ref" && guides[props.mode].map((ele: guide, ind: number) => (
+        <Refs
+          key={ind}
+          text={ele.title}
+          path={ele.path}
+          icon={ele.icon}
+          img={ele.img}
+        />
+      ))}
+    </div>
+  );
+}

v2/src/components/recipeBoxes/refs.tsx

@@ -0,0 +1,26 @@
+import React, {useState, useEffect} from "react";
+import "./recipeBox.css"
+
+type size = "small" | "large"
+
+export default function Refs(props: { text: string, path: string, icon: string, img?: string }) {
+    const [image, setImage] = useState({default: ""});
+    const [imageOnHover, setImageOnHover] = useState({default: ""});
+    const [hover, setHover] = useState(false);
+    useEffect(() => {
+        setImage(require(`../../../static/img/guides/${props.icon}.svg`));
+        setImageOnHover(require(`../../../static/img/guides/${props.icon}-orange.svg`));
+    },);
+
+    const handleMouseOver = () => {
+        setHover(true);
+    }
+    const handleMouseOut = () => {
+        setHover(false);
+    }
+
+    return <a href={props.path} className={`recipe_box`} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
+        <div className="recipe_box__icon_wrapper" style={{ backgroundImage: `url(${ hover ? imageOnHover.default : image.default})` }}></div>
+        <div className="recipe_box__text">{props.text}</div>
+    </a>
+}

v2/src/components/tsconfig.json

@@ -10,6 +10,7 @@
       "module": "esnext",
       "outDir": "./build",
       "moduleResolution": "node",
+      "resolveJsonModule": true,
       "lib": [
           "es5",
           "es6",