Feature/add static badge elements

react-ystemandchess/src/AppRoutes.js

@@ -14,7 +14,7 @@ import SponsorsPartners from "./Pages/About-Us/SponsorsPartners/SponsorsPartners
 import Board from "./Pages/About-Us/Board/Board";
 import Mentor from "./Pages/Mentor/Mentor";
 import Financial from "./Pages/About-Us/Financial/Financial";
-import StudentInventory from "./Pages/Student-Inventory/StudentInventory"
+import StudentInventory from "./Pages/Student-Inventory/StudentInventory";
 
 // Variables and Mutable Data
 import userPortraitImg from "./images/user-portrait-placeholder.svg"

react-ystemandchess/src/components/badges/Badges.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import './Badges.scss';
+import Images from '../../images/imageImporter'
+
+const BadgeKnight = ({}) => {
+    return (
+        <div className="badge">
+            <img src={Images.badgeKnight} alt="YSC Knight Badge" />
+        </div>
+    )
+}
+const BadgeKing = ({}) => {
+    return (
+        <div className="badge">
+            <img src={Images.badgeKing} alt="YSC King Badge" />
+        </div>
+    )
+}
+const BadgeQueen = ({}) => {
+    return (
+        <div className="badge">
+            <img src={Images.badgeQueen} alt="YSC Queen Badge" />
+        </div>
+    )
+}
+const BadgeRook = ({}) => {
+    return (
+        <div className="badge">
+            <img src={Images.badgeRook} alt="YSC Rook Badge" />
+        </div>
+    )
+}
+const BadgePawn = ({}) => {
+    return (
+        <div className="badge">
+            <img src={Images.badgePawn} alt="YSC Pawn Badge" />
+        </div>
+    )
+}
+const BadgeBishop = ({}) => {
+    return (
+        <div className="badge">
+            <img src={Images.BadgeBishop} alt="YSC Bishop Badge" />
+        </div>
+    )
+}
+
+export default Badges = {
+    BadgeKnight,
+    BadgeKing,
+    BadgeQueen,
+    BadgeRook,
+    BadgePawn,
+    BadgeBishop
+} 

react-ystemandchess/src/images/imageImporter.jsx

@@ -24,10 +24,18 @@ import playComputerIcon from "./StudentInventoryIcons/play-computer-icon.svg"
 import recordingsIcon from "./StudentInventoryIcons/recordings-icon.svg"
 import backpackIcon from "./StudentInventoryIcons/backpack-icon.svg"
 
-// Chess Benefit Page
-import mathComputerImg from "./mathArticle/computer.png";
+// Chess Benefits Page
+import mathComputerImg from "./mathArticle/computer.png"
 import mathChampImg from "./mathArticle/Junechamp 2.png"
 
+// Badges
+import badgeKnight from "./badges/badge-knight.png";
+import badgeQueen from "./badges/badge-knight.png";
+import badgeRook from "./badges/badge-knight.png";
+import badgeKing from "./badges/badge-knight.png";
+import badgePawn from "./badges/badge-knight.png";
+import badgeBishop from "./badges/badge-knight.png";
+
 // Global image object. Don't forget to place images here.
 const images = {
     // Home
@@ -55,6 +63,13 @@ const images = {
     playComputerIcon,
     recordingsIcon,
     backpackIcon,
+    // Badges
+    badgeKnight,
+    badgeQueen,
+    badgeRook,
+    badgeKing,
+    badgePawn,
+    badgeBishop
 };
 
 export default images;