@lanaco/lnc-react-ui
Version:
React component library
190 lines (166 loc) • 6.45 kB
JavaScript
"use strict";const r=require("react/jsx-runtime"),p=require("react"),d=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),l=require("./utils-NZLCh-J5.cjs"),v=require("./Icon.cjs"),y=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),b=require("./consts-CtNoHdBj.cjs"),j=d.newStyled.div`
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: 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;
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;
${l.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;
${l.truncateTextInRows(2)}
}
}
&:hover {
cursor: pointer;
& .wrapper__content {
& .wrapper__title {
color: var(--primary-500, #e87722);
}
}
}
`,k=d.newStyled.div`
width: 100%;
height: 11.625rem;
border-radius: 0.75rem;
background: ${l.linearGradientAnimation("-90deg")};
`,$=d.newStyled.div`
display: flex;
padding: 0 0.5rem 0 0;
align-items: center;
justify-content: center;
background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
border-radius: 999px;
&:hover {
cursor: pointer;
}
& .wrapper__icon {
font-size: 1.75rem;
color: var(--gray-950, #14161a);
border-radius: 999px;
width: 2.75rem;
height: 2.75rem;
& 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(--yellow-600, #d97706);
& .wrapper__icon {
color: var(--white, #fff);
}
& .wrapper__text {
color: var(--white, #fff);
}
}
`,N=d.newStyled.div`
width: 7rem;
height: 3rem;
border-radius: 999px;
background: ${l.linearGradientAnimation("-90deg")};
`,I=p.forwardRef(({},t)=>r.jsx(N,{})),C=p.forwardRef(({text:t,isActive:n,icon:i,onSelectCard:o=()=>{}},c)=>r.jsxs($,{className:n?"active":"",onClick:o,children:[r.jsx(v,{icon:i,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:t})]})),W=p.forwardRef(({image:t,imageComponent:n,title:i,description:o,onSelectCard:c=()=>{}},x)=>{const{theme:m}=y.useTheme();return r.jsxs(j,{theme:m,onClick:c,children:[l.isDefined(n)?n:r.jsx("img",{src:t,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[i&&r.jsx("div",{className:"wrapper__title",children:i}),o&&r.jsx("div",{className:"wrapper__description",children:o})]})]})}),F=p.forwardRef(({},t)=>r.jsx(k,{})),R=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: flex;
justify-items: 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;
width: 100%;
}
@media (max-width: ${b.MOBILE_SIZE_PX+"px"}) {
& .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 */
}
}
& .wrapper__cards {
grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitCardsForMobile}, minmax(0, 1fr))`};
gap: 1rem;
}
}
`,q=p.forwardRef(({title:t,subtitle:n,tags:i=[],limitTags:o=7,limitTagsForMobile:c=7,limit:x=3,limitForMobile:m=2,items:s=[],onSelectTag:f=()=>{},onSelectCard:w=()=>{}},T)=>{var g,u;const _=e=>{f==null||f(e==null?void 0:e.uuid)},h=e=>{w==null||w(e==null?void 0:e.uuid)};return r.jsxs(R,{limitTags:o,limitTagsForMobile:c,limitCards:x,limitCardsForMobile:m,children:[r.jsxs("div",{className:"wrapper__heading",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),n&&r.jsx("div",{className:"wrapper__subtitle",children:n})]}),r.jsx("div",{className:"wrapper__tags",children:i&&(i==null?void 0:i.length)>0?i==null?void 0:i.map((e,a)=>r.jsx(C,{icon:e==null?void 0:e.icon,text:e==null?void 0:e.text,onSelectCard:()=>_==null?void 0:_(e)},`field-of-interests-with-tags-card-tag__${a+1}`)):(g=Array.from("123"))==null?void 0:g.map((e,a)=>r.jsx(I,{},`field-of-interests-with-tags-card-tag-skeleton__${a+1}`))}),r.jsx("div",{className:"wrapper__cards",children:s&&(s==null?void 0:s.length)>0?s==null?void 0:s.map((e,a)=>r.jsx(W,{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)},`field-of-interests-with-tags-card__${a+1}`)):(u=Array.from("123"))==null?void 0:u.map((e,a)=>r.jsx(F,{},`field-of-interests-with-tags-card-skeleton__${a+1}`))})]})});module.exports=q;