38 lines
905 B
JavaScript
38 lines
905 B
JavaScript
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;
|