Refactor Skills component props and fix JSON format

Updated Skills.tsx to use typed experience prop instead of props.xp and removed unnecessary state. Also fixed the formatting of monsterCategorie.json by correcting the array and object structure.

Author: JorchCortez

src/Components/Skills/Skills.tsx

@@ -1,19 +1,19 @@
 import { useState } from 'react'
 import SkillContainer from './SkillContainer/SkillContainer'
 import {Farming, Mining, Foraging, Fishing, Combat} from '@media/Skills'
+import type { experienceType } from 'types/displayDataTypes'
 
-const Skills = (props) => {
-    let [skills, setSkills] = useState(props.xp)
-    let [skillImg, setSkillImg] = useState([Farming, Fishing, Foraging, Mining, Combat])
-
+const Skills = (experience: experienceType[]) => {
+    const skillImg =[Farming, Fishing, Foraging, Mining, Combat];
+    console.log("Skills data:", experience);
         return (
             <section className="stats-container"> 
                 <div className="skill-info"> 
-                    {skills.map((item, i: number) => (i === 5) ? "" :  
+                    {experience.map((item, i: number) => (i === 5) ? "" :  
                     <SkillContainer 
                         key={i} 
                         index={i} 
-                        skillImg={skillImg[i]} 
+                        skillImg={skillImg[i] || ""} 
                         skillName={item.skill} 
                         xp={item.xp} 
                         levelInfo={item.levelInfo}

src/Components/Utility/monsterCategorie.json

@@ -91,5 +91,6 @@
         "monsters": [
             "Serpent"
         ]
-    }]
+    }
+]
 }