Fix code scanning alert no. 1: DOM text reinterpreted as HTML (#23)

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

package.json

@@ -15,7 +15,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
-    "svg-to-img": "^2.0.9"
+    "svg-to-img": "^2.0.9",
+    "he": "^1.2.0"
   },
   "devDependencies": {
     "@types/dom-to-image": "^2.6.7",

src/components/LeetCodeCard.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { fetchLeetCodeData } from '../utils/leetcode';
+import he from 'he';
 
 type LeetCodeCardProps = {
   username: string;
@@ -33,7 +34,7 @@ const LeetCodeCard: React.FC<LeetCodeCardProps> = ({ username,type, theme, borde
   }
 
   // Construct the image URL using props
-  const imgUrl = `http://leetcode-status.vercel.app/api/${type}/${username}?theme=${theme}&border=${border}&hide_title=${hide_title}&custom_title=${custom_title}`;
+  const imgUrl = `http://leetcode-status.vercel.app/api/${he.encode(type)}/${he.encode(username)}?theme=${he.encode(theme)}&border=${border}&hide_title=${hide_title}&custom_title=${he.encode(custom_title)}`;
 
   return (
     <div className='flex items-center justify-center rounded'>