Pictures for cards on home page

src/components/QuickLinks/QuickLinkCards.tsx

@@ -3,18 +3,24 @@ import { motion } from "framer-motion";
 import Link from "next/link";
 import React from "react";
 import { CARD_VARIANTS } from "@/animations/card";
+import Image from "next/image";
+import { ThemeContext } from "@/components/Navbar/ThemePicker";
 
 export default function QuickLinkCards({
   quickLinks,
-  divColumnClasses = "row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 px-1 pt-1 pb-3",
+  divColumnClasses = "row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 px-1 pt-1 pb-3",
 }: {
   quickLinks: QuickLink[];
   divColumnClasses?: string;
 }) {
+  const theme = React.useContext(ThemeContext);
+
   return (
     <div style={{ overflow: "hidden" }}>
       <div className={divColumnClasses}>
         {quickLinks.map((quick: QuickLink, index: number) => {
+          const image =
+            theme === "Dark" ? quick.image?.darkTheme : quick.image?.lightTheme;
           return (
             <motion.div
               custom={index}
@@ -32,12 +38,14 @@ export default function QuickLinkCards({
             >
               <div className="col h-100" key={`help-card-${index}`}>
                 <div className="card h-100">
-                  {/* <Image
-                    src={quick.image}
-                    alt={quick.altText}
-                    className="card-img-top"
-                    objectFit="cover"
-                  /> */}
+                  {image != undefined ? (
+                    <Image
+                      src={image!}
+                      alt={quick.image?.altText!}
+                      className="card-img-top m-2"
+                      style={{ objectFit: "contain", height: "128px" }}
+                    />
+                  ) : undefined}
                   <h5 className="card-title m-3 mb-0">{quick.name}</h5>
                   <div className="card-body">
                     <div className="card-text">

src/components/QuickLinks/types.tsx

@@ -1,6 +1,13 @@
+import { StaticImageData } from "next/image";
+
 export type QuickLink = {
   name: string;
   description: string;
   link: string;
   linkText: string;
+  image?: {
+    darkTheme: StaticImageData;
+    lightTheme: StaticImageData;
+    altText: string;
+  };
 };

src/pages/index.tsx

@@ -7,6 +7,12 @@ import Link from "next/link";
 import { useSession } from "next-auth/react";
 import QuickLinkCards from "@/components/QuickLinks/QuickLinkCards";
 import { QuickLink } from "@/components/QuickLinks/types";
+import darkBlog from "../assets/images/index/for-dark-theme/blog.png";
+import lightBlog from "../assets/images/index/for-light-theme/blog.png";
+import darkExtensions from "../assets/images/index/for-dark-theme/extensions.png";
+import lightExtensions from "../assets/images/index/for-light-theme/extensions.png";
+import darkTools from "../assets/images/index/for-dark-theme/tools.png";
+import lightTools from "../assets/images/index/for-light-theme/tools.png";
 
 const pageName = "Home";
 
@@ -15,25 +21,42 @@ type HomeProps = { appProps: AppProps };
 export function Home({ appProps }: HomeProps): React.ReactNode {
   const { data: session } = useSession();
 
+  // https://arcade.makecode.com/S14537-75361-35697-31523
   const quickLinks: QuickLink[] = [
     {
       name: "Extensions",
       description: `A list of ${Math.floor(appProps.extensionsListed / 10) * 10}+ awesome MakeCode Arcade extensions to further your games!`,
       link: "/extensions",
       linkText: "View awesome extensions",
+      image: {
+        darkTheme: darkExtensions,
+        lightTheme: lightExtensions,
+        altText:
+          "A picture of the MakeCode Arcade extension puzzle piece icon in MakeCode Arcade image style.",
+      },
     },
     {
       name: "Tools",
       description: `A list of ${Math.floor(appProps.toolsListed / 10) * 10}+ awesome MakeCode Arcade tools to help you develop great games!`,
       link: "/tools",
       linkText: "View awesome tools",
+      image: {
+        darkTheme: darkTools,
+        lightTheme: lightTools,
+        altText: "A picture of tools in MakeCode Arcade image style.",
+      },
     },
     {
       name: "Blog",
       description:
         "Read about the latest news and updates in the MakeCode Arcade world!",
       link: "/blog",
       linkText: "Read the blog",
+      image: {
+        darkTheme: darkBlog,
+        lightTheme: lightBlog,
+        altText: "A picture of a newspaper in MakeCode Arcade image style.",
+      },
     },
   ];