@lanaco/lnc-react-ui
Version:
React component library
211 lines (184 loc) • 6.6 kB
JavaScript
"use strict";const r=require("react/jsx-runtime"),s=require("react"),l=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),d=require("./consts-CtNoHdBj.cjs"),m=require("./utils-NZLCh-J5.cjs"),v=require("./Icon.cjs"),j=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),k=l.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);
&:hover {
cursor: pointer;
}
/* drop-shadow-sm */
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
& .wrapper__image {
width: 100%;
object-fit: cover;
height: auto;
max-height: 19.5rem;
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;
${m.truncateTextInRows(2)}
transition: var(--transition, all 0.2s ease);
}
}
&:hover {
cursor: pointer;
& .wrapper__content {
& .wrapper__title {
color: var(--primary-500, #e87722);
}
}
}
@media (max-width: ${d.MOBILE_SIZE_PX+"px"}) {
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;
}
}
}
`,$=l.newStyled.div`
width: 100%;
height: 11.625rem;
border-radius: 0.75rem;
background: ${m.linearGradientAnimation("-90deg")};
@media (max-width: ${d.MOBILE_SIZE_PX+"px"}) {
width: 5rem;
height: 5rem;
border-radius: 999px;
}
`,I=l.newStyled.div`
display: flex;
padding: 0 0.5rem 0 0;
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;
}
& .wrapper__icon {
font-size: 1.5rem;
color: var(--gray-950, #14161a);
border-radius: 999px;
width: 2.5rem;
height: 2.5rem;
& i {
width: auto;
}
}
& .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 (max-width: ${d.MOBILE_SIZE_PX+"px"}) {
& .wrapper__text {
white-space: nowrap;
}
}
`,C=l.newStyled.div`
width: 7rem;
height: 3rem;
border-radius: 999px;
background: ${m.linearGradientAnimation("-90deg")};
`,E=s.forwardRef(({},i)=>r.jsx(C,{})),N=s.forwardRef(({text:i,icon:n,onSelectCard:t=()=>{}},p)=>r.jsxs(I,{onClick:t,children:[r.jsx(v,{icon:` ${n}`,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:i})]})),W=s.forwardRef(({image:i,imageComponent:n,title:t,onSelectCard:p=()=>{}},f)=>{const{theme:c}=j.useTheme();return r.jsxs(k,{theme:c,onClick:p,children:[m.isDefined(n)?n:r.jsx("img",{src:i,className:"wrapper__image"}),r.jsx("div",{className:"wrapper__content",children:r.jsx("div",{className:"wrapper__title",children:t})})]})}),G=s.forwardRef(({},i)=>r.jsx($,{})),R=l.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;
flex-wrap: wrap;
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))`};
justify-content: center;
align-items: center;
gap: 1.5rem;
width: 100%;
}
@media (max-width: ${d.MOBILE_SIZE_PX+"px"}) {
& .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: ${i=>`repeat(${i==null?void 0:i.limitCardsForMobile}, minmax(0, 1fr))`};
gap: 1rem;
}
}
`,S=s.forwardRef(({title:i,subtitle:n,tags:t=[],limitTags:p=7,limitTagsForMobile:f=2,limit:c=3,limitForMobile:b=3,items:a=[],onSelectTag:w=()=>{},onSelectCard:h=()=>{}},y)=>{var g,u;const _=e=>{w==null||w(e==null?void 0:e.uuid)},x=e=>{h==null||h(e==null?void 0:e.uuid)};return r.jsxs(R,{ref:y,limitTags:p,limitTagsForMobile:f,limitCards:c,limitCardsForMobile:b,children:[r.jsxs("div",{className:"wrapper__heading",children:[i&&r.jsx("div",{className:"wrapper__title",children:i}),n&&r.jsx("div",{className:"wrapper__subtitle",children:n})]}),r.jsx("div",{className:"wrapper__cards",children:a&&(a==null?void 0:a.length)>0?a==null?void 0:a.map((e,o)=>r.jsx(W,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,title:e==null?void 0:e.title,onSelectCard:()=>x==null?void 0:x(e==null?void 0:e.uuid)},`general-with-tags-card__${o+1}`)):(g=Array.from("123"))==null?void 0:g.map((e,o)=>r.jsx(G,{},`general-with-tags-card-skeleton__${o+1}`))}),r.jsx("div",{className:"wrapper__tags",children:t&&(t==null?void 0:t.length)>0?t==null?void 0:t.map((e,o)=>r.jsx(N,{icon:e==null?void 0:e.icon,text:e==null?void 0:e.text,onSelectCard:()=>_==null?void 0:_(e)},`general-with-tags-card-tag__${o+1}`)):(u=Array.from("123"))==null?void 0:u.map((e,o)=>r.jsx(E,{},`general-with-tags-card-tag-skeleton__${o+1}`))})]})});module.exports=S;