kupos-ui-components-lib
Version:
A reusable UI components package
63 lines (62 loc) • 5.79 kB
JavaScript
import React from "react";
import RatingItem from "./RatingItem";
const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, translation, }) => {
return (React.createElement("div", { className: "flex items-center" },
React.createElement("div", { className: "w-[18px] h-auto mr-[4px] relative" },
React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[16px] h-[16px] mr-[4px] object-contain mb-[4px] ${isSoldOut ? "grayscale" : ""}`, onMouseEnter: (e) => {
const tooltip = e.currentTarget.nextElementSibling;
if (tooltip)
tooltip.style.display = "block";
}, onMouseLeave: (e) => {
const tooltip = e.currentTarget.nextElementSibling;
if (tooltip)
tooltip.style.display = "none";
} }),
React.createElement("div", { className: "hidden group-hover:block absolute left-[80px] -bottom-[160px] z-20 mt-2 w-[280px] rounded-lg shadow-service-2 bg-white overflow-hidden rounded-[14px] border-[2px]", style: {
borderColor: colors.ratingBorderColor,
color: isSoldOut ? "#c0c0c0" : "",
} },
React.createElement("div", { className: "pt-[20px] text-center" },
React.createElement("div", { className: "text-[12px] bold-text text-[#464647]" }, translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverText),
React.createElement("div", { className: "text-[12px] font-light text-[#464647]" }, serviceItem.operator_service_name)),
React.createElement("div", { className: "px-3 py-2 flex flex-col gap-[10px] font9" },
React.createElement(RatingItem, { rating: serviceItem.operator_details[6] &&
serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
serviceItem.operator_details[6])[0]] &&
parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
serviceItem.operator_details[6])[0]]).toFixed(1)
? +parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
serviceItem.operator_details[6])[0]]).toFixed(1)
: 0, label: translation === null || translation === void 0 ? void 0 : translation.busQuality }),
React.createElement(RatingItem, { rating: serviceItem.operator_details[6] &&
serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
serviceItem.operator_details[6])[1]] &&
parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
serviceItem.operator_details[6])[1]]).toFixed(1)
? +parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
serviceItem.operator_details[6])[1]]).toFixed(1)
: 0, label: translation === null || translation === void 0 ? void 0 : translation.punctuality }),
React.createElement(RatingItem, { rating: serviceItem.operator_details[6] &&
serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
serviceItem.operator_details[6])[2]] &&
parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
serviceItem.operator_details[6])[2]]).toFixed(1)
? +parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
serviceItem.operator_details[6])[2]]).toFixed(1)
: 0, label: translation === null || translation === void 0 ? void 0 : translation.serviceQuality }),
React.createElement(RatingItem, { rating: serviceItem.operator_details[6] &&
serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
serviceItem.operator_details[6])[3]] &&
parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
serviceItem.operator_details[6])[3]]).toFixed(1)
? +parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
serviceItem.operator_details[6])[3]]).toFixed(1)
: 0, label: translation === null || translation === void 0 ? void 0 : translation.serviceRecommendation })),
React.createElement("div", { className: "px-1 py-2 text-center text-[12px] text-[#ff8f45] font9", style: {
backgroundColor: colors.ratingBottomColor,
} }, `${translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverCalculationText} ${Object.values(serviceItem.operator_details)[5]} ${translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverCalculationUsers}`))),
React.createElement("span", { className: "text-[#464647] bold-text text-[13.33px]" }, typeof serviceItem.operator_details[1] === "number"
? serviceItem.operator_details[1].toFixed(1)
: serviceItem.operator_details[1])));
};
export default RatingHover;