@lanaco/lnc-react-ui
Version:
React component library
244 lines (212 loc) • 8.63 kB
JavaScript
"use strict";const r=require("react/jsx-runtime"),f=require("react"),h=require("./utils-BK6B_Y9X.cjs"),I=require("./Icon.cjs"),b=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),w=require("./breakpoints-CcVm-gVm.cjs"),M=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),v=require("./style-17Ie7d9D.cjs"),R=b.styled.a`
text-decoration: none;
color: var(--gray-950);
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(--white, #fff);
&:hover {
cursor: pointer;
}
/* 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;
${h.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;
${h.truncateTextInRows(2)}
}
}
@media ${w.down("S")} {
& .wrapper__content {
& .wrapper__title {
font-size: 0.875rem;
line-height: 1.25rem;
}
& .wrapper__description {
display: none;
}
}
}
`,E=b.styled.div`
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
height: 100%;
min-width: 8rem;
&:hover {
cursor: pointer;
}
& .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-95004, rgba(20, 22, 26, 0.04));
border-radius: 999px;
&:hover {
background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
}
& 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;
max-width: 16rem;
${h.truncateText()}
}
&.active {
& .wrapper__icon {
background: var(--gray-950, #14161a);
color: var(--white, #fff);
}
}
@media ${w.down("S")} {
max-width: unset;
min-width: unset;
flex-direction: row;
align-items: center;
gap: 0.25rem;
border-radius: 999px;
background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
padding: 0 0.75rem;
&.active {
background: var(--gray-950, #14161a);
& .wrapper__icon {
background: transparent;
}
& .wrapper__text {
color: var(--white, #fff);
}
}
& .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;
max-width: unset;
}
}
`,F=f.forwardRef(({text:t,isActive:a=!1,icon:n,onSelectCard:s=()=>{}},c)=>r.jsxs(E,{ref:c,className:a?"active":"",onClick:s,children:[r.jsx(I,{icon:n,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:t})]})),O=f.forwardRef(({image:t,imageComponent:a,title:n,description:s,className:c,onSelectCard:j=()=>{},link:g,LinkComponent:x},$)=>{const m=x||"a",{theme:_}=M.useTheme();return r.jsxs(R,{ref:$,theme:_,className:c,onClick:j,as:m,...x?{to:`/${g}`}:{href:`/${g}`},children:[h.isDefined(a)?a:r.jsx("img",{src:t,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[n&&r.jsx("div",{className:"wrapper__title",children:n}),s&&r.jsx("div",{className:"wrapper__description",children:s})]})]})}),T=b.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__external {
width: 100%;
}
& .wrapper__tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-self: stretch;
gap: 2rem;
}
& .wrapper__cards {
display: grid;
grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitCards}, minmax(12.5rem, 1fr))`};
grid-auto-rows: 0.625rem;
gap: 0.625rem;
width: 100%;
position: relative;
& .wrapper__card {
overflow: hidden;
}
}
@media ${w.down("M")} {
& .wrapper__tags {
gap: 0.75rem;
}
& .wrapper__cards {
grid-template-columns: repeat(2, minmax(12.5rem, 1fr));
}
}
@media ${w.down("S")} {
gap: 1rem;
& .wrapper__cards {
grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitCardsForMobile}, minmax(0, 1fr))`};
}
}
`,L=b.styled(v.SkeletonAnimationContainer)`
&.skeleton__tags {
max-width: 50rem;
}
@media ${w.down("S")} {
&.skeleton__tags {
overflow-x: hidden;
}
}
`,A=({keyPrefix:t})=>r.jsx(L,{className:"skeleton__tags",children:[1,2,3,4,5].map(a=>r.jsxs(v.SkeletonColumnContainer,{alignItems:"center",gap:"0.5rem",children:[r.jsx(v.SkeletonCircle,{size:"2.75rem"}),r.jsx(v.SkeletonRect,{height:"1.5rem",width:"8rem"})]},`${t}-tag-${a}`))}),W=({keyPrefix:t,isLoading:a=!1,fallbackComponent:n=r.jsx(r.Fragment,{}),children:s})=>r.jsx(f.Suspense,{fallbackComponent:n,children:a===!0?r.jsx(A,{keyPrefix:t}):s}),D=f.forwardRef(({title:t,subtitle:a,tags:n=[],items:s=[],limitTags:c=5,limitTagsForMobile:j=5,limit:g=3,limitForMobile:x=2,selectedTag:$,onSelectTag:m=()=>{},onSelectCard:_=()=>{},className:d,isLoadingTags:S=!1,LinkComponent:q},z)=>(f.useLayoutEffect(()=>{if(!h.isDefinedNotEmptyString(d))return;const e=()=>{const p=document==null?void 0:document.querySelector(`.${d} .wrapper__cards`),o=p==null?void 0:p.querySelectorAll(".wrapper__card");o==null||o.forEach(y=>{const C=y.getBoundingClientRect().height,N=Math.ceil((C+10)/20);y.style.gridRowEnd=`span ${N}`});const k=o==null?void 0:o[(o==null?void 0:o.length)-1];if(k){const y=k.offsetTop+k.offsetHeight;p.style.height=`${y}px`}},l=document==null?void 0:document.querySelector(`.${d} .wrapper__cards`),i=l==null?void 0:l.querySelectorAll(".wrapper__image");let u=0;return(i==null?void 0:i.length)===0?e():(i==null||i.forEach(p=>{p.complete?u++:p.addEventListener("load",()=>{u++,u===(i==null?void 0:i.length)&&e()})}),u===(i==null?void 0:i.length)&&e()),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[d,s]),r.jsxs(T,{ref:z,limitTags:c,limitTagsForMobile:j,limitCards:g,limitCardsForMobile:x,className:`lp-section lp-field-of-interests-masonry-section${d?` ${d}`:""}`,numberOfTags:n==null?void 0:n.length,children:[r.jsxs("div",{className:"wrapper__heading",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),a&&r.jsx("div",{className:"wrapper__subtitle",children:a})]}),r.jsx(W,{isLoading:S,keyPrefix:"field-of-interests-masonry-tag",children:r.jsx("div",{className:"wrapper__tags__external",children:r.jsx("div",{className:"wrapper__tags",children:n==null?void 0:n.map((e,l)=>r.jsx(F,{icon:e==null?void 0:e.icon,text:e==null?void 0:e.title,isActive:(e==null?void 0:e.code)===$,onSelectCard:()=>m==null?void 0:m(e)},`field-of-interests-masonry-tag__${l+1}`))})})}),r.jsx("div",{className:"wrapper__cards",children:s==null?void 0:s.map((e,l)=>r.jsx(O,{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:()=>_==null?void 0:_(e),className:"wrapper__card",link:e==null?void 0:e.link,LinkComponent:q},`field-of-interests-with-tags-card__${l+1}`))})]})));module.exports=D;