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

React component library

"use strict";const r=require("react/jsx-runtime"),d=require("react"),c=require("./utils-NZLCh-J5.cjs"),s=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),o=require("./consts-CtNoHdBj.cjs"),h=s.newStyled.div`
  width: 7.5rem;
  height: auto;
  max-height: 7.5rem;

  &:hover {
    cursor: pointer;
  }

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

  @media (max-width: ${o.MOBILE_SIZE_PX+"px"}) {
    width: 4.5rem;
    height: auto;
    max-height: 4.5rem;

    & .wrapper__image {
      width: 4.5rem;
      height: auto;
    }
  }
`,_=s.newStyled.div`
  width: 7.5rem;
  height: 7.5rem;
  background: ${c.linearGradientAnimation("-90deg")};

  @media (max-width: ${o.MOBILE_SIZE_PX+"px"}) {
    width: 4.5rem;
    height: 4.5rem;
  }
`,g=d.forwardRef(({imageComponent:t,image:n,onSelectCard:a},i)=>r.jsx(h,{children:c.isDefined(t)?t:r.jsx("img",{src:n,className:"wrapper__image",onSelectCard:a})})),m=d.forwardRef(({},t)=>r.jsx(_,{})),w=s.newStyled.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: 1rem;
    text-align: center;
    width: 100%;

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

    & .wrapper__subtitle {
      color: var(---gray-600, #676e79);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1.25rem;
      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 (max-width: ${o.MOBILE_SIZE_PX+"px"}) {
    & .wrapper__content {
      align-content: center;
      gap: 1rem;
      flex-wrap: wrap;

      & .wrapper__item {
        max-width: 4 0.5rem;
      }
    }
  }
`,x=d.forwardRef(({title:t,subtitle:n,items:a=[],onSelectCard:i=()=>{}},f)=>{var l;return r.jsx(w,{children:r.jsxs("div",{className:"wrapper__heading",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),n&&r.jsx("div",{className:"wrapper__subtitle",children:n}),r.jsx("div",{className:"wrapper__content",children:a&&(a==null?void 0:a.length)>0?a==null?void 0:a.map((e,p)=>r.jsx(g,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:()=>i==null?void 0:i(e==null?void 0:e.uuid),className:"wrapper__item"},`brand-hit-card__${p+1}`)):(l=Array.from("12345"))==null?void 0:l.map((e,p)=>r.jsx(m,{},`brand-hit-card-skeleton__${p+1}`))})]})})});module.exports=x;