kupos-ui-components-lib/dist/components/ServiceItem/RatingItem.js

A reusable UI components package

import React from "react";
const RatingItem = ({ rating, label }) => {
    // Calculate percentage for styling
    const percentage = ((rating / 5) * 100).toFixed(0);
    // Determine color based on rating percentage
    const getColorClass = () => {
        const percent = parseInt(percentage);
        if (percent < 30)
            return "red";
        if (percent < 50)
            return "yellow";
        if (percent < 80)
            return "orange";
        return "green";
    };
    const colorClass = getColorClass();
    return (React.createElement("div", { className: "rating_item flex items-center mb-2" },
        React.createElement("div", { className: "rating_circle relative" },
            React.createElement("div", { className: `c100 small p${percentage} ${colorClass}` },
                React.createElement("span", { className: "text-[#464647] font-medium text-[12px]" }, rating.toFixed(1)),
                React.createElement("div", { className: "slice" },
                    React.createElement("div", { className: "bar" }),
                    React.createElement("div", { className: "fill" })))),
        React.createElement("span", { className: "text-[#464647] text-[13.33px] ml-[10px]" }, label)));
};
export default RatingItem;