Change ProgresBar from react one to home made

src/components/ProgresBar.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+const ProgressBar = (props) => {
+    const { bgcolor, completed } = props;
+
+    const containerStyles = {
+        height: 30,
+        width: '100%',
+        backgroundColor: "#cacdd2",
+        borderRadius: 50,
+        borderWidth: 2,
+        marginTop: 5
+    }
+
+    const fillerStyles = {
+        height: '100%',
+        width: `${completed}%`,
+        backgroundColor: bgcolor,
+        borderRadius: 'inherit',
+        textAlign: 'right',
+        transition: 'width 1s ease-in-out',
+    }
+
+    const labelStyles = {
+        padding: 5,
+        color: 'white',
+        fontWeight: 'bold'
+    }
+
+    return (
+        <div style={containerStyles}>
+            <div style={fillerStyles}>
+                <span style={labelStyles}>{`${completed}%`}</span>
+            </div>
+        </div>
+    );
+};
+
+export default ProgressBar;

src/components/SkillCard.tsx

@@ -1,6 +1,8 @@
 // @ts-ignore
 import React from 'react';
 import { FaCuttlefish, FaPhp, FaPython, FaServer} from 'react-icons/fa';
+//@ts-ignore
+import ProgresBar from "./ProgresBar.tsx";
 
 const iconClassName = "mx-auto text-4xl text-gray-800 dark:text-gray-200";
 
@@ -22,7 +24,7 @@ const SkillCard: React.FC<SkillCardProps> = ({skillName, skillLevel}) => {
         <div className="m-4 w-40 flex-none mx-auto text-center p-5 rounded-xl border-2 border-gray-300 ">
             {skillIcon}
             <p className="text-xl font-semibold mt-4 dark:text-gray-400">{skillName}</p>
-            <progress className="w-full mt-4 rounded-lg" value={skillLevel} max="100"></progress>
+            <ProgresBar className="" bgcolor={"#1d2a44"} completed={skillLevel} ></ProgresBar>
         </div>
     );
 }

src/components/Skills.tsx

@@ -1,5 +1,6 @@
 // @ts-ignore
 import React from 'react';
+// @ts-ignore
 import SkillCard from './SkillCard.tsx';
 
 function Skills({skills}) {