@lanaco/lnc-react-ui/dist/ReviewsSection.js

React component library

import { jsxs as p, jsx as r, Fragment as S } from "react/jsx-runtime";
import { forwardRef as w, Suspense as C, memo as k, useMemo as y } from "react";
import { s as n } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as u } from "./breakpoints-BubDitvo.js";
import { u as R } from "./useDetectMobile-B0Jog4jQ.js";
import { t as N, n as z, c as M, g as P } from "./utils-BUdHa0nB.js";
import { useTheme as j } from "./ThemeProvider.js";
import { P as L } from "./index-DxYmn1al.js";
import { S as W, e as A, d as E, a as f } from "./style-NhzYtIA7.js";
const F = n.div`
  display: flex;
  flex-direction: column;
  color: var(--darkest-950);
  & .container-title {
    /* width: 100%; */
    text-align: center;
    font-weight: 600;
    font-size: 1.5rem;
  }
`, I = n.div`
  display: grid;
  grid-template-columns: ${(t) => `repeat(${t.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;

  @media ${u("M")} {
    grid-template-columns: repeat(2, 1fr);
  }

  @media ${u("S")} {
    grid-template-columns: repeat(2, 1fr);
  }

  @media ${u("XS")} {
    grid-template-columns: repeat(1, 1fr);
  }
`, T = n.a`
  padding-top: 5rem;
  overflow: hidden;
  text-decoration: none;
  color: var(--gray-950);
`, x = n.div`
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4.5rem 1.25rem 2rem 1.25rem;
  gap: 1.25rem;
  min-height: 13.9375rem;
  max-height: 13.9375rem;
  width: 100%;

  border-radius: 0.75rem;
  border: 1px solid var(--gray-95008);
  background: var(--white);

  /* drop-shadow */
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px 0px rgba(0, 0, 0, 0.06);

  & .cont {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--gray-700, #4e555f);

    & .cont-title {
      font-size: 1.375rem;
      font-weight: 600;
      color: var(--gray-950, #14161a);
      ${N()}
    }

    & .cont-text {
      ${z(2)}
    }
  }

  & img {
    position: absolute;
    top: -3.125rem;
    left: 1.25rem;
    object-fit: cover;
    min-width: 6.25rem;
    max-width: 6.25rem;
    min-height: 6.25rem;
    max-height: 6.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--gray-95008);

    /* drop-shadow-lg */
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
      0px 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
`, v = (t, o) => P(
  t.theme,
  "StarRating",
  t.color,
  t.disabled === !0 ? "disabled" : "enabled",
  o
), V = n.div`
  font-size: ${(t) => v(t, "fontSize")};
  line-height: ${(t) => v(t, "lineHeight")};
  line-height: 1.5rem;
  width: fit-content;
  display: flex;
  gap: 0.25rem;

  & .rating {
    position: relative;
    margin: 0;
    padding: 0;
    width: fit-content;
  }

  & .review-count {
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.5rem;
    color: ${(t) => t.color};
  }
`, q = n.span`
  position: absolute;
  z-index: 1;
  display: block;
  top: 0;
  left: 0;
  overflow: hidden;
  width: ${(t) => t.width}%;

  color: ${(t) => M(
  t.theme,
  "StarRating",
  t.color,
  t.disabled === !0 ? "disabled" : "enabled",
  "filledColor"
)};
`, D = n.span`
  padding: 0;
  display: block;
  z-index: 0;
  color: ${(t) => t.color};
`, G = w((t, o) => {
  const {
    rating: a = 0,
    reviewCount: i = null,
    disabled: l = !1,
    tabIndex: s = 0,
    className: h = "",
    style: m = {},
    color: d = "primary",
    size: g = "large"
  } = t, { theme: e } = j(), c = {
    theme: e,
    color: d,
    size: g,
    style: m,
    disabled: l
  }, $ = a / 5 * 100;
  return /* @__PURE__ */ p(
    V,
    {
      ref: o,
      tabIndex: s,
      ...c,
      className: `star-rating ${h}`,
      children: [
        /* @__PURE__ */ p("div", { className: "rating", children: [
          /* @__PURE__ */ r(
            q,
            {
              className: "filled-stars",
              ...c,
              width: $,
              children: "★★★★★"
            }
          ),
          /* @__PURE__ */ r(D, { ...c, children: "★★★★★" })
        ] }),
        !isNaN(i) && Number.isFinite(i) && /* @__PURE__ */ r("div", { className: "review-count", children: `(${i.toLocaleString()})` })
      ]
    }
  );
}), H = w((t, o) => {
  const {
    image: a,
    text: i,
    title: l,
    link: s,
    rating: h,
    onSelectCard: m = () => {
    },
    LinkComponent: d
  } = t;
  return /* @__PURE__ */ r(
    T,
    {
      ref: o,
      className: "review-card",
      onClick: m,
      as: d || "a",
      ...d ? {
        to: `/${s}`
      } : {
        href: `/${s}`
      },
      children: /* @__PURE__ */ p(x, { children: [
        /* @__PURE__ */ r(L, { src: a }),
        /* @__PURE__ */ p("div", { className: "cont", children: [
          /* @__PURE__ */ r("span", { className: "cont-title", children: l }),
          /* @__PURE__ */ r("div", { className: "cont-text", children: i })
        ] }),
        /* @__PURE__ */ r(G, { color: "warning", rating: h })
      ] })
    }
  );
}), X = n(W)`
  @media ${u("S")} {
    flex-direction: column;

    & > div {
      flex-direction: column;
    }
  }
`, B = ({ keyPrefix: t }) => /* @__PURE__ */ r(X, { children: [1, 2, 3].map((o) => /* @__PURE__ */ p(A, { children: [
  /* @__PURE__ */ r(E, { size: "6.25rem" }),
  /* @__PURE__ */ r(f, { width: "100%", height: "2rem", borderRadius: "0.75rem" }),
  /* @__PURE__ */ r(f, { width: "100%", height: "1rem", borderRadius: "0.75rem" }),
  /* @__PURE__ */ r(f, { width: "100%", height: "1rem", borderRadius: "0.75rem" }),
  /* @__PURE__ */ r(f, { height: "1rem", borderRadius: "0.75rem", width: "6rem" })
] }, `${t}-${o}`)) }), J = ({
  keyPrefix: t,
  isLoading: o = !1,
  fallbackComponent: a = /* @__PURE__ */ r(S, {}),
  children: i
}) => /* @__PURE__ */ r(C, { fallbackComponent: a, children: o === !0 ? /* @__PURE__ */ r(B, { keyPrefix: t }) : i }), b = k(H), re = w((t, o) => {
  const {
    title: a = "Electronics reviews",
    items: i,
    limit: l = 3,
    onSelectCard: s = () => {
    },
    isLoading: h = !1,
    LinkComponent: m
  } = t, d = R(), g = y(() => /* @__PURE__ */ r(S, { children: d === !0 ? i == null ? void 0 : i.map((e, c) => /* @__PURE__ */ r(
    b,
    {
      text: e == null ? void 0 : e.text,
      title: e == null ? void 0 : e.title,
      image: e == null ? void 0 : e.image,
      link: e == null ? void 0 : e.link,
      rating: e == null ? void 0 : e.ratingArithmeticMean,
      onSelectCard: () => s(e),
      LinkComponent: m
    },
    c
  )) : i == null ? void 0 : i.slice(0, l).map((e, c) => /* @__PURE__ */ r(
    b,
    {
      text: e == null ? void 0 : e.text,
      title: e == null ? void 0 : e.title,
      image: e == null ? void 0 : e.image,
      link: e == null ? void 0 : e.link,
      rating: e == null ? void 0 : e.ratingArithmeticMean,
      onSelectCard: () => s(e),
      LinkComponent: m
    },
    c
  )) }), [i, d, l]);
  return /* @__PURE__ */ p(F, { ref: o, className: "lp-section lp-reviews-section", children: [
    /* @__PURE__ */ r("div", { className: "container-title", children: a }),
    /* @__PURE__ */ r(J, { isLoading: h, keyPrefix: "reviews-skeleton", children: /* @__PURE__ */ r(I, { limit: l, children: g }) })
  ] });
});
export {
  re as default
};