@lanaco/lnc-react-ui
Version:
React component library
199 lines (173 loc) • 6.56 kB
JavaScript
"use strict";const r=require("react/jsx-runtime"),w=require("react"),v=require("./Icon.cjs"),f=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),d=require("./breakpoints-CcVm-gVm.cjs"),x=require("./utils-BK6B_Y9X.cjs"),j=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),_=require("./index-BOESyoNn.cjs"),$=f.styled.a`
text-decoration: none;
color: var(--gray-950);
display: flex;
flex-direction: column;
align-items: flex-start;
border-radius: 0.75rem;
border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
background: var(--Lanaco-Gray-white, #fff);
&:hover {
cursor: pointer;
}
/* drop-shadow-sm */
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
& .wrapper__image {
width: 100%;
max-width: 18rem;
object-fit: cover;
height: auto;
border-radius: 0.75rem 0.75rem 0 0;
}
& .wrapper__content {
display: flex;
padding: 1rem;
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
align-self: stretch;
& .wrapper__title {
color: var(--gray-950, #14161a);
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: 1.5rem;
${x.truncateTextInRows(2)}
transition: var(--transition, all 0.2s ease);
}
}
cursor: pointer;
@media ${d.down("S")} {
background: transparent;
border: none;
box-shadow: none;
gap: 0.75rem;
& .wrapper__image {
border-radius: 999px;
aspect-ratio: 1 / 1;
}
& .wrapper__content {
align-items: center;
padding: 0;
text-align: center;
& .wrapper__title {
font-size: 0.875rem;
line-height: 1.25rem;
}
}
}
`,N=f.styled.a`
text-decoration: none;
color: var(--gray-950);
display: flex;
padding: 0 0.75rem 0 0.75rem;
align-items: center;
justify-content: center;
background: var(--white, #fff);
border: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
border-radius: 999px;
height: 2.5rem;
&:hover {
cursor: pointer;
background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
}
& .wrapper__icon {
font-size: 1.5rem;
color: var(--gray-950, #14161a);
border-radius: 999px;
width: 2.5rem;
height: 2.5rem;
margin-left: -0.75rem;
& i {
width: auto;
&::after {
margin-left: 0;
}
}
}
& .wrapper__text {
color: var(--gray-950, #14161a);
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
letter-spacing: -0.09px;
}
@media ${d.down("S")} {
& .wrapper__text {
white-space: nowrap;
}
}
`,k=w.forwardRef(({title:t,icon:a,onSelectCard:i=()=>{},selectAction:s,LinkComponent:n},l)=>{const o=n||"a";return r.jsxs(N,{ref:l,onClick:i,as:o,...n?{to:`/${s}`}:{href:`/${s}`},children:[x.isDefinedNotEmptyString(a)&&r.jsx(v,{icon:a,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:t})]})}),C=w.forwardRef(({imageUrl:t,imageComponent:a,title:i,onSelectCard:s=()=>{},selectAction:n,LinkComponent:l},o)=>{const{theme:p}=j.useTheme(),c=l||"a";return r.jsxs($,{ref:o,theme:p,onClick:s,as:c,...l?{to:`/${n}`}:{href:`/${n}`},children:[x.isDefined(a)?a:r.jsx("img",{src:t,className:"wrapper__image"}),r.jsx("div",{className:"wrapper__content",children:r.jsx("div",{className:"wrapper__title",children:i})})]})}),q=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;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.75rem;
}
& .wrapper__cards {
display: grid;
grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitCards}, minmax(0, 1fr))`};
justify-content: center;
align-items: center;
gap: 1.5rem;
}
@media ${d.down("M")} {
& .wrapper__cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media ${d.down("S")} {
& .wrapper__tags {
display: flex;
flex-wrap: nowrap;
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 */
}
}
& .wrapper__cards {
grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitCardsForMobile}, minmax(0, 1fr))`};
gap: 1rem;
}
}
`,W=w.forwardRef(({title:t,subtitle:a,options:i=[],limitTags:s=7,limitTagsForMobile:n=2,limit:l=3,limitForMobile:o=3,items:p=[],onSelectTag:c=()=>{},onSelectCard:m=()=>{},isLoadingTags:u=!1,isLoadingCards:y=!1,LinkComponent:h},b)=>r.jsxs(q,{ref:b,limitTags:s,limitTagsForMobile:n,limitCards:l,limitCardsForMobile:o,className:"lp-section lp-general-section lp-general-with-tags-cards-section",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(_.SuspenseFieldOfInterestsWithTagsCard,{isLoading:y,keyPrefix:"general-with-tags-cards-card",children:r.jsx("div",{className:"wrapper__cards",children:p==null?void 0:p.map((e,g)=>r.jsx(C,{imageUrl:e==null?void 0:e.imageUrl,imageComponent:e==null?void 0:e.imageComponent,title:e==null?void 0:e.title,selectAction:e==null?void 0:e.selectAction,onSelectCard:()=>{m==null||m(e)},LinkComponent:h},`general-with-tags-card__${g+1}`))})}),r.jsx(_.SuspenseFieldOfInterestsWithTagsTag,{isLoading:u,keyPrefix:"general-with-tags-cards-tag",children:r.jsx("div",{className:"wrapper__tags",children:i==null?void 0:i.map((e,g)=>r.jsx(k,{icon:e==null?void 0:e.icon,title:e==null?void 0:e.title,onSelectCard:()=>c==null?void 0:c(e),selectAction:e==null?void 0:e.selectAction,LinkComponent:h},`general-with-tags-card-tag__${g+1}`))})})]}));module.exports=W;