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

React component library

"use strict";const r=require("react/jsx-runtime"),x=require("react"),p=require("./utils-BK6B_Y9X.cjs"),$=require("./Icon.cjs"),_=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),d=require("./breakpoints-CcVm-gVm.cjs"),N=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),v=require("./index-BOESyoNn.cjs"),k=_.styled.a`
  text-decoration: none;
  color: var(--gray-950);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 0.75rem;
  border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
  background: var(--Lanaco-Gray-white, #fff);

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

  & .wrapper__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    height: 100%;
    max-height: 10.375rem;
    border-radius: 0.75rem 0.75rem 0 0;
  }

  & .wrapper__content {
    display: flex;
    padding: 0.75rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    align-self: stretch;
    transition: var(--transition, all 0.2s ease);

    & .wrapper__title {
      transition: var(--transition, all 0.2s ease);
      color: var(--gray-950, #14161a);
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.5rem;
      ${p.truncateTextInRows(2)}
    }

    & .wrapper__description {
      color: var(--gray-600, #676e79);
      font-size: 0.75rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1rem;
      letter-spacing: 0.025rem;
      ${p.truncateTextInRows(2)}
    }
  }
  cursor: pointer;
`,C=_.styled.div`
  display: flex;
  padding: 0 0.75rem 0 0.75rem;
  align-items: center;
  justify-content: center;
  background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
  border-radius: 999px;
  min-width: 2.75rem;
  min-height: 2.75rem;

  &:hover {
    cursor: pointer;
    background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
  }

  & .wrapper__icon {
    font-size: 1.75rem;
    color: var(--gray-950, #14161a);
    border-radius: 999px;
    margin-left: -0.5rem;

    & i {
      width: auto;

      &::after {
        margin-left: 0;
      }
    }
  }

  & .wrapper__text {
    color: var(--gray-950, #14161a);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
  }

  &.active {
    background: ${i=>(i==null?void 0:i.activeColor)||"var(--yellow-600, #d97706)"};

    & .wrapper__icon {
      color: var(--white, #fff);
    }

    & .wrapper__text {
      color: var(--white, #fff);
    }
  }

  @media ${d.down("S")} {
    min-width: fit-content;
  }
`,I=x.forwardRef(({name:i,isActive:s,activeColor:t,icon:n,onSelectCard:m=()=>{}},a)=>r.jsxs(C,{ref:a,className:s?"active":"",activeColor:t,onClick:m,children:[p.isDefinedNotEmptyString(n)&&r.jsx($,{icon:n,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:i})]})),q=x.forwardRef(({image:i,imageComponent:s,name:t,description:n,onSelectCard:m=()=>{},uuid:a,nameSlug:o,LinkComponent:l},c)=>{const u=l||"a",{theme:f}=N.useTheme();return r.jsxs(k,{ref:c,theme:f,onClick:m,as:u,...l?{to:`/product/${p.isDefinedNotEmptyString(o)?`${o}-`:""}${a}`}:{href:`/product/${p.isDefinedNotEmptyString(o)?`${o}-`:""}${a}`},children:[p.isDefined(s)?s:r.jsx("img",{src:i,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),n&&r.jsx("div",{className:"wrapper__description",children:n})]})]})}),F=_.styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;

  & .wrapper__heading {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;

    & .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__tags {
    display: flex;
    justify-items: center;
    align-items: center;
    gap: 0.75rem;
  }

  & .wrapper__cards {
    display: grid;
    grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCards}, minmax(0, 1fr))`};
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
  }

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

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

    & .wrapper__tags {
      overflow-x: scroll;
      justify-content: flex-start;
      width: 100%;

      -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 */
      }
    }
  }

  @media ${d.down("XS")} {
    & .wrapper__cards {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
`,W=x.forwardRef(({title:i,subtitle:s,tags:t=[],limitTags:n=7,limitTagsForMobile:m=7,limit:a=3,limitForMobile:o=2,items:l=[],isLoadingTags:c=!1,isLoadingCards:u=!1,selectedTag:f,activeColor:y,onSelectTag:h=()=>{},onSelectCard:w=()=>{},LinkComponent:b},j)=>r.jsxs(F,{ref:j,limitTags:n,limitTagsForMobile:m,limitCards:a,limitCardsForMobile:o,className:"lp-section lp-field-of-interests-with-tags-cards-section",children:[r.jsxs("div",{className:"wrapper__heading",children:[i&&r.jsx("div",{className:"wrapper__title",children:i}),s&&r.jsx("div",{className:"wrapper__subtitle",children:s})]}),r.jsx(v.SuspenseFieldOfInterestsWithTagsTag,{isLoading:c,keyPrefix:"field-of-interests-with-tags-tag",children:r.jsx("div",{className:"wrapper__tags",children:t==null?void 0:t.map((e,g)=>r.jsx(I,{icon:e==null?void 0:e.icon,name:e==null?void 0:e.title,isActive:(e==null?void 0:e.code)===f,activeColor:y,onSelectCard:()=>h==null?void 0:h(e)},`field-of-interests-with-tags-card-tag__${g+1}`))})}),r.jsx(v.SuspenseFieldOfInterestsWithTagsCard,{isLoading:c,keyPrefix:"field-of-interests-with-tags-card",children:r.jsx("div",{className:"wrapper__cards",children:l==null?void 0:l.map((e,g)=>r.jsx(q,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,name:e==null?void 0:e.title,description:e==null?void 0:e.description,onSelectCard:()=>w==null?void 0:w(e),uuid:e==null?void 0:e.uuid,nameSlug:e==null?void 0:e.nameSlug,LinkComponent:b},`field-of-interests-with-tags-card__${g+1}`))})})]}));module.exports=W;