init commit

frontend/resume-builder/src/components/ResumeSections/RatingInput.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+const RatingInput = ({
+  value = 0,
+  total = 5,
+  onChange = () => {},
+  color = "#9125E6",
+  bgColor = "#E9D4FF",
+}) => {
+  // Convert 0–100 to 0–5 scale
+  const displayValue = Math.round((value / 100) * total);
+
+  const handleClick = (index) => {
+    // Convert 0–5 scale back to 0–100 for DB
+    const newValue = Math.round(((index + 1) / total) * 100);
+    onChange(newValue);
+  };
+
+  return <div className="flex gap-3 cursor-pointer">
+      {[...Array(total)].map((_, index) => {
+        const isActive = index < displayValue;
+
+        return (
+          <div
+            key={index}
+            onClick={() => handleClick(index)}
+            className="w-4 h-4 rounded transition-all"
+            style={{
+              backgroundColor: isActive ? color : bgColor,
+            }}
+          ></div>
+        );
+      })}
+    </div>
+};
+
+export default RatingInput;