From 183c61cfdca8ea915eefcec315a9e792259243c5 Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Sun, 21 Apr 2024 21:23:26 -0400
Subject: [PATCH] Show lang icons

---
 Frontend/src/app/components/mdx.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/Frontend/src/app/components/mdx.tsx b/Frontend/src/app/components/mdx.tsx
index 14e5f8f..4d71d8d 100644
--- a/Frontend/src/app/components/mdx.tsx
+++ b/Frontend/src/app/components/mdx.tsx
@@ -19,6 +19,7 @@ import {
     stackoverflowDark,
 } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { capitalize } from "@/lib/stringUtils";
+import Image from "next/image";
 
 /**
  * The MDX components to style.
@@ -94,7 +95,13 @@ const components: any = {
                 </SyntaxHighlighter>
 
                 {/* Language Icon */}
-                <div className="absolute top-0 right-0 px-2 py-0.5 text-white/75 bg-zinc-700/50 rounded select-none pointer-events-none">
+                <div className="absolute top-0 right-0 px-2 py-0.5 flex gap-2 items-center text-white/75 bg-zinc-700/50 rounded select-none pointer-events-none">
+                    <Image
+                        src={`https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${language}/${language}-original.svg`}
+                        alt={`${language} Language Icon`}
+                        width={20}
+                        height={20}
+                    />
                     {capitalize(language)}
                 </div>
             </div>