@shopify/shop-minis-react
Version:
React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)
79 lines (78 loc) • 2.43 kB
JavaScript
import { jsxs as s, jsx as a } from "react/jsx-runtime";
import * as g from "react";
import { cn as t } from "../../lib/utils.js";
import { formatReviewCount as y, normalizeRating as w } from "../../utils/merchant-card.js";
import c from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/star.js";
import R from "../../shop-minis-react/node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/star-half.js";
const l = {
sm: "h-3 w-3",
md: "h-4 w-4",
lg: "h-5 w-5"
}, S = {
sm: "text-xs",
md: "text-sm",
lg: "text-base"
}, u = g.forwardRef(
({
averageRating: d,
reviewCount: m,
size: e = "sm",
filledStarColor: o = "var(--grayscale-d100)",
emptyStarColor: n = "var(--grayscale-l20)",
className: f,
...h
}, p) => {
const i = Math.min(5, w(d)), x = Math.floor(i), v = i % 1;
return /* @__PURE__ */ s(
"div",
{
ref: p,
className: t("flex items-center", f),
"data-slot": "product-review-stars",
...h,
children: [
/* @__PURE__ */ s("div", { className: "relative", children: [
/* @__PURE__ */ a("div", { className: "flex", children: Array.from({ length: 5 }, (N, r) => /* @__PURE__ */ a(
c,
{
className: t(l[e]),
style: { fill: n },
strokeWidth: 0
},
r
)) }),
/* @__PURE__ */ s("div", { className: "flex absolute top-0 left-0", children: [
Array.from({ length: x }, (N, r) => /* @__PURE__ */ a(
c,
{
className: t(l[e]),
style: { fill: o },
strokeWidth: 0
},
r
)),
v >= 0.5 && /* @__PURE__ */ a(
R,
{
className: t(l[e]),
style: { fill: o },
strokeWidth: 0
}
)
] })
] }),
m && /* @__PURE__ */ s("span", { className: t(S[e], "ml-1"), children: [
"(",
y(m),
")"
] })
]
}
);
}
);
u.displayName = "ProductReviewStars";
export {
u as ProductReviewStars
};
//# sourceMappingURL=product-review-stars.js.map