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

React component library

"use strict";const t=require("react/jsx-runtime"),h=require("react"),o=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),w=require("./breakpoints-CcVm-gVm.cjs"),x=require("./useDetectMobile-DYV6V1yw.cjs"),f=require("./utils-BK6B_Y9X.cjs"),y=require("./ThemeProvider.cjs"),S=require("./index-DOkcmaFO.cjs"),m=require("./style-17Ie7d9D.cjs"),k=o.styled.div`
  display: flex;
  flex-direction: column;
  color: var(--darkest-950);
  & .container-title {
    /* width: 100%; */
    text-align: center;
    font-weight: 600;
    font-size: 1.5rem;
  }
`,R=o.styled.div`
  display: grid;
  grid-template-columns: ${r=>`repeat(${r.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;

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

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

  @media ${w.down("XS")} {
    grid-template-columns: repeat(1, 1fr);
  }
`,$=o.styled.a`
  padding-top: 5rem;
  overflow: hidden;
  text-decoration: none;
  color: var(--gray-950);
`,C=o.styled.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);
      ${f.truncateText()}
    }

    & .cont-text {
      ${f.truncateTextInRows(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);
  }
`,b=(r,n)=>f.getComponentPropValue(r.theme,"StarRating",r.color,r.disabled===!0?"disabled":"enabled",n),N=o.styled.div`
  font-size: ${r=>b(r,"fontSize")};
  line-height: ${r=>b(r,"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: ${r=>r.color};
  }
`,z=o.styled.span`
  position: absolute;
  z-index: 1;
  display: block;
  top: 0;
  left: 0;
  overflow: hidden;
  width: ${r=>r.width}%;

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

    & > div {
      flex-direction: column;
    }
  }
`,L=({keyPrefix:r})=>t.jsx(F,{children:[1,2,3].map(n=>t.jsxs(m.SkeletonColumnContainer,{children:[t.jsx(m.SkeletonSquare,{size:"6.25rem"}),t.jsx(m.SkeletonRect,{width:"100%",height:"2rem",borderRadius:"0.75rem"}),t.jsx(m.SkeletonRect,{width:"100%",height:"1rem",borderRadius:"0.75rem"}),t.jsx(m.SkeletonRect,{width:"100%",height:"1rem",borderRadius:"0.75rem"}),t.jsx(m.SkeletonRect,{height:"1rem",borderRadius:"0.75rem",width:"6rem"})]},`${r}-${n}`))}),T=({keyPrefix:r,isLoading:n=!1,fallbackComponent:s=t.jsx(t.Fragment,{}),children:i})=>t.jsx(h.Suspense,{fallbackComponent:s,children:n===!0?t.jsx(L,{keyPrefix:r}):i}),v=h.memo(P),W=h.forwardRef((r,n)=>{const{title:s="Electronics reviews",items:i,limit:a=3,onSelectCard:l=()=>{},isLoading:g=!1,LinkComponent:p}=r,d=x.useDetectMobile(),u=h.useMemo(()=>t.jsx(t.Fragment,{children:d===!0?i==null?void 0:i.map((e,c)=>t.jsx(v,{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:()=>l(e),LinkComponent:p},c)):i==null?void 0:i.slice(0,a).map((e,c)=>t.jsx(v,{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:()=>l(e),LinkComponent:p},c))}),[i,d,a]);return t.jsxs(k,{ref:n,className:"lp-section lp-reviews-section",children:[t.jsx("div",{className:"container-title",children:s}),t.jsx(T,{isLoading:g,keyPrefix:"reviews-skeleton",children:t.jsx(R,{limit:a,children:u})})]})});module.exports=W;