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

React component library

"use strict";const t=require("react/jsx-runtime"),s=require("react"),f=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),d=require("./breakpoints-CcVm-gVm.cjs"),C=require("./useDetectMobile-DYV6V1yw.cjs"),u=require("./utils-BK6B_Y9X.cjs"),N=require("./style-cJUZrJoG.cjs"),v=require("./Button.cjs"),z=require("./CategorySimpleCard-Dr1FxIY9.cjs"),r=require("./style-17Ie7d9D.cjs"),$=f.styled.div`
  display: grid;
  grid-template-columns: ${()=>"repeat(6,  minmax(0, 1fr))"};
  gap: 2rem;

  @media ${d.down("M")} {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @media ${d.down("S")} {
    display: flex;
    gap: 1rem;
    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
    ::-webkit-scrollbar {
      -webkit-appearance: none;
    }
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */

    &::-webkit-scrollbar {
      display: none;
      /* Safari and Chrome */
    }
  }
`,E=f.styled(r.SkeletonAnimationColumnContainer)`
  @media ${d.down("S")} {
    & .skeleton__cards {
      overflow-x: hidden;
    }
  }
`,M=({keyPrefix:l})=>t.jsx(E,{children:[1,2].map(a=>t.jsxs(r.SkeletonContainer,{className:"skeleton__cards",children:[t.jsx(r.SkeletonSquare,{size:"8.25rem"}),t.jsx(r.SkeletonSquare,{size:"8.25rem"}),t.jsx(r.SkeletonSquare,{size:"8.25rem"}),t.jsx(r.SkeletonSquare,{size:"8.25rem"}),t.jsx(r.SkeletonSquare,{size:"8.25rem"}),t.jsx(r.SkeletonSquare,{size:"8.25rem"})]},`${l}-${a}`))}),_=({keyPrefix:l,isLoading:a=!1,fallbackComponent:c=t.jsx(t.Fragment,{}),children:m})=>t.jsx(s.Suspense,{fallbackComponent:c,children:a===!0?t.jsx(M,{keyPrefix:l}):m}),b=s.memo(z.CategorySimpleCard),D=s.forwardRef((l,a)=>{const{icon:c,title:m="Shop by category",items:n,buttonText:p="Shop now",buttonLink:S,limit:g=12,onButtonAction:h=()=>{},onSelectCard:i=()=>{},isLoading:k=!1,getImage:y=()=>{},LinkComponent:j}=l,q=C.useDetectMobile(),w=s.useMemo(()=>t.jsx(t.Fragment,{children:q===!0?n==null?void 0:n.map((e,o)=>s.createElement(b,{...e,key:o,uuid:e==null?void 0:e.uuid,image:y(e==null?void 0:e.image)||null,name:e==null?void 0:e.name,code:e==null?void 0:e.code,onSelectCard:()=>i==null?void 0:i(e==null?void 0:e.uuid),LinkComponent:j})):n==null?void 0:n.slice(0,g).map((e,o)=>s.createElement(b,{...e,key:o,uuid:e==null?void 0:e.uuid,image:y(e==null?void 0:e.image)||null,name:e==null?void 0:e.name,code:e==null?void 0:e.code,onSelectCard:()=>i==null?void 0:i(e==null?void 0:e.uuid),LinkComponent:j}))}),[n]);return t.jsxs(N.RegulatTitleSectionWrapper,{ref:a,className:"lp-section lp-simple-categories-section",children:[t.jsxs("div",{className:"regular-title",children:[t.jsxs("div",{className:"regular-title-text",children:[u.isDefinedNotEmptyString(c)&&t.jsx("i",{className:c}),t.jsx("span",{children:m})]}),u.isDefinedNotEmptyString(p)&&u.isDefinedNotEmptyString(S)&&!k&&t.jsx(v,{type:"button",btnType:"tinted",color:"neutral",onClick:e=>{var o;(o=e==null?void 0:e.target)==null||o.blur(),h(S)},borderRadius:"curved",className:"button-link",children:p})]}),t.jsx(_,{isLoading:k,keyPrefix:"simple-categories-skeleton",children:t.jsx($,{limit:g,children:w})})]})});module.exports=D;