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

React component library

"use strict";const e=require("react/jsx-runtime"),c=require("react"),p=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),f=require("./consts-CtNoHdBj.cjs"),S=require("./useDetectMobile-D6d5LpdL.cjs"),d=require("./utils-NZLCh-J5.cjs"),k=require("./style-DN1qT8BE.cjs"),x=require("./Button.cjs"),C=p.newStyled.div`
  display: grid;
  grid-template-columns: ${i=>"repeat(6,  minmax(0, 1fr))"};
  gap: 2rem;

  @media (max-width: ${f.MOBILE_SIZE_PX+"px"}) {
    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 */
    }
  }
`,w=p.newStyled.div`
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-950, #14161a);
  min-height: 12.25rem;
  max-height: 12.25rem;
  border-radius: 0.75rem;
  border: 1px solid var(--gray-95008, rgba(20, 22, 26, 0.08));
  background: var(--white, #fff);
  cursor: pointer;

  transition: var(--transition);
  &:hover {
    color: var(--primary-500, #f59e0b);
  }

  /* drop-shadow-sm */
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;

  & .card-content {
    padding: 0.75rem;
    ${d.truncateTextInRows(2)}
  }

  & .card-content-2 {
    ${d.truncateTextInRows(2)}
  }

  & img {
    width: 100%;
    object-fit: cover;
    min-height: 8.25rem;
    max-height: 8.25rem;
  }

  & .skeleton-img {
    width: 100%;
    min-height: 8.25rem;
    max-height: 8.25rem;
    ${d.linearGradientAnimation("-90deg")}
  }

  @media (max-width: ${f.MOBILE_SIZE_PX+"px"}) {
    min-width: 8.75rem;
    max-width: 8.75rem;

    & .img,
    .skeleton-img {
      min-height: 5.375rem;
      max-height: 5.375rem;
    }
  }
`,N=c.forwardRef((i,a)=>{const{uuid:n,image:o,name:t,onSelectCard:l=()=>{}}=i;return e.jsxs(w,{className:"simple-category-card",onClick:()=>l(n),children:[e.jsx("img",{src:o}),e.jsx("div",{className:"card-content",children:e.jsx("div",{className:"card-content-2",children:t})})]})}),R=c.forwardRef(({},i)=>e.jsxs(w,{className:"simple-category-card",children:[e.jsx("div",{className:"skeleton-img"}),e.jsx("div",{className:"card-content"})]})),q=({limit:i=12,isLoading:a=!1,keyPrefix:n})=>e.jsx(e.Fragment,{children:Array.from({length:i},(o,t)=>e.jsx(R,{isLoading:a},`${n}-skeleton-category-card-${t}`))}),$=({children:i,fallbackComponent:a=e.jsx(e.Fragment,{}),isLoading:n=!1,limit:o,keyPrefix:t})=>e.jsx(c.Suspense,{fallbackComponent:a,children:n===!0?e.jsx(q,{isLoading:n,limit:o,keyPrefix:t}):i}),h=c.memo(N),E=c.forwardRef((i,a)=>{const{icon:n,title:o="Shop by category",items:t,buttonText:l,buttonLink:g,limit:m=12,onButtonAction:y=()=>{},onSelectCard:s=()=>{},isLoading:b=!1}=i,j=S.useDetectMobile(),v=c.useMemo(()=>e.jsx(e.Fragment,{children:j===!0?t==null?void 0:t.map((r,u)=>e.jsx(h,{uuid:r==null?void 0:r.uuid,image:r==null?void 0:r.image,name:r==null?void 0:r.name,onSelectCard:()=>s==null?void 0:s(r==null?void 0:r.uuid)},u)):t==null?void 0:t.slice(0,m).map((r,u)=>e.jsx(h,{uuid:r==null?void 0:r.uuid,image:r==null?void 0:r.image,name:r==null?void 0:r.name,onSelectCard:()=>s==null?void 0:s(r==null?void 0:r.uuid)},u))}),[t]);return e.jsxs(k.RegulatTitleSectionWrapper,{ref:a,children:[e.jsxs("div",{className:"regular-title",children:[e.jsxs("div",{className:"regular-title-text",children:[d.isDefinedNotEmptyString(n)&&e.jsx("i",{className:n}),e.jsx("span",{children:o})]}),d.isDefinedNotEmptyString(g)&&e.jsx(x,{type:"button",btnType:"tinted",color:"gray",onClick:()=>y(g),borderRadius:"curved",children:l})]}),e.jsx(C,{limit:m,children:e.jsx($,{isLoading:b,limit:m,keyPrefix:"explore-landing",children:v})})]})});module.exports=E;