@prijsvrijtechsupport/ui 0.0.42 → 0.0.43

package/dist/index.cjs

@@ -4120,23 +4120,52 @@ Logo.displayName = "Logo";
 //#region src/components/pageRating/index.tsx
 const RATING_COLORS = [
 	"#FB3C00",
+	"#FB3C00",
+	"#FB7800",
 	"#FB7800",
 	"#FBD300",
+	"#FBD300",
 	"#73CF11",
+	"#00B845",
 	"#00B845"
 ];
 const PageRating = ({ rating, ratingsCount, text, className }) => {
 	const RatingBox = ({ rating: boxRating, ratingsCount: ratingsCount$1 }) => {
-		const ratingColor = boxRating > 0 ? RATING_COLORS[Math.min(Math.floor(boxRating) - 1, RATING_COLORS.length - 1)] : "rgba(0,0,0,0.25)";
+		const roundedRating = Math.round(boxRating * 2) / 2;
+		let ratingColor = "rgba(0,0,0,0.25)";
+		if (boxRating > 0) {
+			if (roundedRating % 1 !== 0) {
+				const halfColorIndex = Math.floor(roundedRating) * 2 - 1;
+				ratingColor = RATING_COLORS[Math.min(halfColorIndex, RATING_COLORS.length - 1)] || "#FB3C00";
+			} else {
+				const fullColorIndex = Math.floor(boxRating) * 2 - 2;
+				ratingColor = RATING_COLORS[Math.min(fullColorIndex, RATING_COLORS.length - 1)] || "#FB3C00";
+			}
+		}
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex gap-1",
 			children: Array.from({ length: ratingsCount$1 }, (_, i) => {
-				const isActive = i < Math.floor(boxRating);
-				const color = isActive ? ratingColor : "rgba(0,0,0,0.25)";
+				const starIndex = i + 1;
+				const isFullyFilled = starIndex <= Math.floor(roundedRating);
+				const isHalfFilled = starIndex === Math.ceil(roundedRating) && roundedRating % 1 !== 0;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "w-6 h-6 rounded flex items-center justify-center",
-					style: { backgroundColor: color },
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					className: "w-6 h-6 rounded flex items-center justify-center relative overflow-hidden",
+					style: { backgroundColor: isFullyFilled ? ratingColor : "rgba(0,0,0,0.25)" },
+					children: isHalfFilled ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "relative w-6 h-6 flex items-center justify-center",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "absolute inset-0 z-0",
+							style: {
+								backgroundColor: ratingColor,
+								clipPath: "inset(0 50% 0 0)"
+							}
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+							viewBox: "0 0 24 24",
+							fill: "white",
+							className: "w-5 h-5 absolute top-[2px] left-[2px] inset-0 z-10",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 16.1748L15.65 15.2498L17.175 19.9498L12 16.1748ZM20.4 10.0998H13.975L12 4.0498L10.025 10.0998H3.59998L8.79998 13.8498L6.82498 19.8998L12.025 16.1498L15.225 13.8498L20.4 10.0998Z" })
+						})]
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 						viewBox: "0 0 24 24",
 						fill: "white",
 						className: "w-5 h-5",
@@ -4180,7 +4209,7 @@ const PriceCheck = ({ className, price, text, disabled = false, "data-testid": t
 			children: text
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "price-check-price-padding text-start price-check-color-price price-check-fontFamily-price font-bold text-3xl whitespace-nowrap price-check-price-margin-top",
+			className: "price-check-price-padding text-start price-check-color-price price-check-fontFamily-price font-bold text-2xl whitespace-nowrap price-check-price-margin-top",
 			children: [
 				price,
 				",",