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

React component library

"use strict";const r=require("react/jsx-runtime"),l=require("react"),d=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),x=require("./consts-CtNoHdBj.cjs"),o=require("./utils-NZLCh-J5.cjs"),N=require("./Icon.cjs"),k=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),I=require("./useEffectOnce-DFrzfNzT.cjs"),E=d.newStyled.div`
  display: flex;
  width: 100%;
  height: fit-content;
  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%;
    height: auto;
    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;

    & .wrapper__title {
      color: var(--gray-950, #14161a);
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.5rem;
      ${o.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;
      ${o.truncateTextInRows(2)}
    }
  }
`,M=d.newStyled.div`
  width: 100%;
  height: 11.625rem;
  border-radius: 0.75rem;
  background: ${o.linearGradientAnimation("-90deg")};
`,R=d.newStyled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;

  & .wrapper__icon {
    display: flex;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.5rem;
    align-items: center;
    font-size: 1.75rem;
    color: var(--gray-950, #14161a);
    background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
    border-radius: 999px;

    & i {
      width: auto;
    }
  }

  & .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: var(--gray-950, #14161a);

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

  @media (max-width: ${x.MOBILE_SIZE_PX+"px"}) {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    width: 100%;
    background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
    padding: 0 0.75rem;

    & .wrapper__icon {
      display: flex;
      width: 1.25rem;
      width: 1.25rem;
      padding: 0;
      align-items: center;
      font-size: 1.25rem;
      color: var(--gray-950, #14161a);
      background: transparent;
      border-radius: 0;
    }

    & .wrapper__text {
      font-size: 0.875rem;
      line-height: 1.25rem;
      white-space: nowrap;
    }
  }
`,q=d.newStyled.div`
  width: 7.5rem;
  width: 7.5rem;
  border-radius: 999px;
  background: ${o.linearGradientAnimation("-90deg")};

  @media (max-width: ${x.MOBILE_SIZE_PX+"px"}) {
    width: 7.5rem;
    height: 2.5rem;
  }
`,z=l.forwardRef(({},i)=>r.jsx(q,{})),O=l.forwardRef(({text:i,isActive:a,icon:t,onSelectCard:n=()=>{}},p)=>r.jsxs(R,{className:a?"active":"",onClick:n,children:[r.jsx(N,{icon:t,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:i})]})),S=l.forwardRef(({image:i,imageComponent:a,title:t,description:n,className:p,onSelectCard:m=()=>{}},g)=>{const{theme:c}=k.useTheme();return r.jsxs(E,{theme:c,className:p,onClick:m,children:[o.isDefined(a)?a: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})]})]})}),C=l.forwardRef(({},i)=>r.jsxs(M,{children:[r.jsx("div",{className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[r.jsx("div",{className:"wrapper__title"}),r.jsx("div",{className:"wrapper__description"})]})]})),F=d.newStyled.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: grid;
    grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitTags}, minmax(0, 1fr))`};
    justify-content: 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))`};
    grid-auto-rows: 0.625rem;
    gap: 0.625rem;
    width: 100%;

    & .wrapper__card {
      overflow: hidden;
    }
  }

  @media (max-width: ${x.MOBILE_SIZE_PX+"px"}) {
    & .wrapper__tags {
      display: flex;
      overflow-x: scroll;
      justify-content: flex-start;
      width: 100%;
    }

    & .wrapper__cards {
      grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCardsForMobile}, minmax(0, 1fr))`};
    }
  }
`,L=l.forwardRef(({title:i,subtitle:a,tags:t=[],items:n=[],limitTags:p=5,limitTagsForMobile:m=5,limit:g=3,limitForMobile:c=2,onSelectTag:_=()=>{},onSelectCard:w=()=>{}},j)=>{var u,y;const f=e=>{_==null||_(e==null?void 0:e.uuid)},h=e=>{w==null||w(e==null?void 0:e.uuid)};return I.useEffectOnce(()=>{const e=()=>{document.querySelector(".wrapper__cards").querySelectorAll(".wrapper__card").forEach(v=>{const b=v.getBoundingClientRect().height,$=Math.ceil((b+10)/20);v.style.gridRowEnd=`span ${$}`})};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),r.jsxs(F,{ref:j,limitTags:p,limitTagsForMobile:m,limitCards:g,limitCardsForMobile:c,children:[r.jsxs("div",{className:"wrapper__heading",children:[i&&r.jsx("div",{className:"wrapper__title",children:i}),a&&r.jsx("div",{className:"wrapper__subtitle",children:a})]}),r.jsx("div",{className:"wrapper__tags",children:t&&(t==null?void 0:t.length)>0?t==null?void 0:t.map((e,s)=>r.jsx(O,{icon:e==null?void 0:e.icon,text:e==null?void 0:e.text,onSelectCard:()=>f==null?void 0:f(e)},`field-of-interests-masonry-tag__${s+1}`)):(u=Array.from("12345"))==null?void 0:u.map((e,s)=>r.jsx(z,{},`field-of-interests-masonry-tag-skeleton__${s+1}`))}),r.jsx("div",{className:"wrapper__cards",children:n&&(n==null?void 0:n.length)>0?n==null?void 0:n.map((e,s)=>r.jsx(S,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,title:e==null?void 0:e.title,description:e==null?void 0:e.description,onSelectCard:()=>h==null?void 0:h(e==null?void 0:e.uuid),className:"wrapper__card"},`field-of-interests-with-tags-card__${s+1}`)):(y=Array.from("12345"))==null?void 0:y.map((e,s)=>r.jsx(C,{},`field-of-interests-with-tags-card-skeleton__${s+1}`))})]})});module.exports=L;