Revamp skill display UI and add section title

Updated SkillContainer to use level indicators and improved layout, replacing the progress bar and XP-to-next-level display. Added a section title to the Skills component for better structure and imported related CSS.

Author: JorchCortez

src/Components/Skills/SkillContainer/SkillContainer.tsx

@@ -1,4 +1,5 @@
 import './SkillContainer.css';
+import {CombatMastery, ForagingMastery, FarmingMastery, MiningMastery, FishingMastery} from '@media/Masteries';
 
 type SkillProps = {
     skillImg: string;
@@ -17,7 +18,6 @@ const Skills = ({
     levelInfo
 }: SkillProps) => {
     const currentLevel = (xp >= levelInfo.val) ? levelInfo.id : levelInfo.id - 1;
-    const xpToNextLevel = (xp >= 15000) ? 0 : (levelInfo.val - xp);
 
     const currentLevelXpRequirement = levelInfo.id > 1 ? Math.floor(levelInfo.val * 0.85) : 0;
     const nextLevelXpRequirement = levelInfo.val;
@@ -32,31 +32,27 @@ const Skills = ({
     }
 
     return (
-        <div className="skill-container">
-            <p className="skill-container__title">
-                {`${skillName} lvl ${currentLevel}`}
-            </p>
-            <div className="skill-container__stats">
-                <div className="skill-container__stats-line">
-                    <div className="skill-container__progress-bar">
-                        <div 
-                            className="skill-container__progress-fill"
-                            style={{
-                                width: `${progressPercentage}%`
-                            }}
-                        ></div>
-                    </div>
-                    {xpToNextLevel > 0 ? `${xpToNextLevel}XP to next level` : "Max Level Reached"}
+    <div className="skill-container">
+            <div className='skill-container__item'>
+                <span>{`${skillName}`}</span>
+                <img 
+                    src={skillImg} 
+                    alt={skillName}
+                    title={`${skillName} - Level ${currentLevel}`}
+                    className='skill-container__icon'
+                />
+                <div className='skill-container__level-indicators' >
+                    {Array.from({ length: 10 }).map((_, index) => (
+                        <div
+                            key={index}
+                            className={`skill-container__level-block ${index === 4 || index === 9 ? 'lg' : 'sm'} ${currentLevel > index ? 'active' : ''}`}
+                        />
+                    ))}
                 </div>
+                <span className='skill-container__level-no'>{`${currentLevel}`}</span>
             </div>
-            <img 
-                src={skillImg} 
-                alt={skillName}
-                className="skill-container__icon"
-                title={`${skillName} - Level ${currentLevel}`}
-            />
         </div>
-    );  
+    )
 };
 
 export default Skills;

src/Components/Skills/Skills.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import SkillContainer from './SkillContainer/SkillContainer'
 import {Farming, Mining, Foraging, Fishing, Combat} from '@media/Skills'
 import type { experienceType } from 'types/displayDataTypes'
+import './Skills.css'
 
 interface SkillsProps {
     experience: experienceType[];
@@ -12,6 +13,9 @@ const Skills = ({ experience }: SkillsProps) => {
     console.log("Skills data:", experience);
         return (
             <section className="stats-container"> 
+                <div className="section-title">
+                    <h2>Skills</h2>
+                </div>
                 <div className="skill-info"> 
                     {experience.map((item, i: number) => (i === 5) ? "" :  
                     <SkillContainer