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

React component library

"use strict";const a=require("react/jsx-runtime"),i=require("react"),l=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),d=require("./breakpoints-CcVm-gVm.cjs"),f=l.styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  text-align: center;

  & .card__name {
    font-weight: 500;
    font-size: 1rem;
    leading-trim: none;
    line-height: 1.5rem;
    letter-spacing: 0;
    color: var(--neutral-600, #0f2a46);
    white-space: nowrap;

    &.below {
      display: none;
    }
  }

  @media ${d.down("S")} {
    & .card__name {
      &.below {
        display: block;
      }
    }
  }
`,_=l.styled.a`
  text-decoration: none;
  color: var(--gray-950, #14161a);
  display: block;
  border-radius: 0.75rem;
  border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
  background: var(--gray-50, #f5f7fa);
  aspect-ratio: 2 / 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease;

  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    height: 0.375rem;
    width: 100%;
    z-index: 2;
    border-radius: 1rem 1rem 0 0;
    background: ${r=>(r==null?void 0:r.borderColor)||"var(--primary-500, #f59e0b)"};
    transition: left 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  }

  &:hover {
    &::before {
      left: 0;
    }

    & .card__image {
      transform: scale(1.1);
    }
  }

  & .card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
  }

  & .card__name-badge {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    background: var(--white, #fff);
    border-radius: 0.5rem;
    padding: 0.5rem;

    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  }

  @media ${d.down("S")} {
    aspect-ratio: 3 / 2;

    & .card__name-badge {
      display: none;
    }
  }
`,u=i.forwardRef(({name:r,imageUrl:o,buttonLink:t,borderColor:p,onSelectCard:c=()=>{},LinkComponent:n},m)=>{const e=n||"a",s=i.useRef();return a.jsxs(f,{children:[a.jsxs(_,{ref:s,borderColor:p,onClick:g=>c(g,s),as:e,...n?{to:`/${t}`}:{href:`/${t}`},children:[o&&a.jsx("img",{src:o,alt:r,className:"card__image",loading:"lazy"}),r&&a.jsx("div",{className:"card__name-badge",children:a.jsx("span",{className:"card__name",children:r})})]}),r&&a.jsx("div",{className:"card__name below",children:r})]})}),w=l.styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;

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

  & .wrapper__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
  }

  @media ${d.down("S")} {
    gap: 1rem;

    & .wrapper__title {
      font-size: 1.375rem;
    }

    & .wrapper__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
    }
  }

  @media ${d.down("XS")} {
    & .wrapper__title {
      font-size: 1.375rem;
      font-style: semibold;
    }

    & .wrapper__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
`,h=i.memo(u),x=i.forwardRef(({title:r,items:o,onSelectCard:t=()=>{},componentName:p,LinkComponent:c},n)=>{const m=i.useMemo(()=>o==null?void 0:o.map((e,s)=>a.jsx(h,{name:e==null?void 0:e.name,imageUrl:e==null?void 0:e.imageUrl,borderColor:e==null?void 0:e.borderColor,buttonLink:e==null?void 0:e.buttonLink,onSelectCard:(g,b)=>t==null?void 0:t(e,b),LinkComponent:c},`category-card__${s+1}`)),[o]);return a.jsxs(w,{ref:n,className:"lp-section lp-category-cards-section",children:[r&&a.jsx("div",{className:"wrapper__title",children:r}),a.jsx("div",{className:"wrapper__grid",children:m})]})});module.exports=x;