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

React component library

"use strict";const e=require("react/jsx-runtime"),d=require("react"),_=require("./utils-BK6B_Y9X.cjs"),h=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),m=require("./breakpoints-CcVm-gVm.cjs"),g=require("./style-17Ie7d9D.cjs"),x=h.styled.a`
  text-decoration: none;
  color: var(--gray-950);
  width: 7.5rem;
  height: auto;
  max-height: 7.5rem;

  &:hover {
    cursor: pointer;
  }

  & .wrapper__image {
    width: 7.5rem;
    height: auto;
  }

  @media ${m.down("S")} {
    width: 4.5rem;
    height: auto;
    max-height: 4.5rem;

    & .wrapper__image {
      width: 4.5rem;
      height: auto;
    }
  }
`,f=d.forwardRef(({imageComponent:t,image:a,onSelectCard:n,urlPrefix:s,urlSufix:i,code:o,LinkComponent:c},p)=>{const l=c||"a";return e.jsx(x,{ref:p,onClick:n,as:l,...c?{to:`${s}${o}${i}`}:{href:`${s}${o}${i}`},children:_.isDefined(t)?t:e.jsx("img",{src:a,className:"wrapper__image"})})}),u=h.styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;

  & img {
    border-radius: 0.75rem;
  }

  & .wrapper__heading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    width: 100%;

    & .wrapper__title {
      color: var(--navy-900, #0c1520);
      text-align: center;
      font-size: 1.5rem;
      font-style: normal;
      font-weight: 600;
      line-height: 2rem;
      letter-spacing: -0.47px;
    }

    & .wrapper__subtitle {
      color: var(--navy-500, #7a8594);
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.5rem;
      letter-spacing: 0.25px;
    }
  }

  & .wrapper__content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    align-self: stretch;

    & .wrapper__item {
      max-width: 7.5rem;
    }
  }

  @media ${m.down("S")} {
    & .wrapper__content {
      align-content: center;
      gap: 1rem;
      flex-wrap: wrap;

      & .wrapper__item {
        max-width: 4.5rem;
      }
    }
  }
`,j=h.styled(g.SkeletonAnimationContainer)`
  @media ${m.down("S")} {
    gap: 1rem;
    flex-wrap: wrap;
  }
`,y=({keyPrefix:t})=>e.jsx(j,{justifyContent:"center",alignItems:"center",gap:"3rem",children:[1,2,3,4,5].map(a=>e.jsx(g.SkeletonRect,{height:"4rem",width:"7.5rem"},`${t}-${a}`))}),$=({keyPrefix:t,isLoading:a=!1,fallbackComponent:n=e.jsx(e.Fragment,{}),children:s})=>e.jsx(d.Suspense,{fallbackComponent:n,children:a===!0?e.jsx(y,{keyPrefix:t}):s}),v=d.forwardRef(({title:t,subtitle:a,items:n=[],isLoading:s=!1,onSelectCard:i=()=>{},urlPrefix:o,urlSufix:c,LinkComponent:p},l)=>e.jsxs(u,{ref:l,className:"lp-section lp-brand-hits-section",children:[e.jsxs("div",{className:"wrapper__heading",children:[t&&e.jsx("div",{className:"wrapper__title",children:t}),a&&e.jsx("div",{className:"wrapper__subtitle",children:a})]}),e.jsx($,{isLoading:s,keyPrefix:"brand-hits-skeleton",children:e.jsx("div",{className:"wrapper__content",children:n==null?void 0:n.map((r,w)=>e.jsx(f,{image:r==null?void 0:r.image,imageComponent:r==null?void 0:r.imageComponent,onSelectCard:()=>i==null?void 0:i(r),className:"wrapper__item",urlPrefix:o,urlSufix:c,code:r==null?void 0:r.card,LinkComponent:p},`brand-hit-card__${w+1}`))})})]}));module.exports=v;