@lanaco/lnc-react-ui
Version:
React component library
211 lines (182 loc) • 7.03 kB
JavaScript
"use strict";const e=require("react/jsx-runtime"),x=require("react"),j=require("./Button.cjs"),l=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),i=require("./utils-BK6B_Y9X.cjs"),d=require("./breakpoints-CcVm-gVm.cjs"),y=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),n=require("./style-17Ie7d9D.cjs"),v=l.styled.a`
text-decoration: none;
display: flex;
flex-direction: column;
align-items: flex-start;
border-radius: 0.75rem;
position: relative;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
cursor: pointer;
text-decoration: none;
overflow: hidden;
grid-column: ${r=>{var t;return((t=r.position)==null?void 0:t.columnStart)||"1"}} /
${r=>{var t;return((t=r.position)==null?void 0:t.columnEnd)||"6"}};
grid-row: ${r=>{var t;return((t=r.position)==null?void 0:t.rowStart)||"1"}} /
${r=>{var t;return((t=r.position)==null?void 0:t.rowEnd)||"1"}};
background: ${r=>r.backgroundColor||`linear-gradient(
178deg,
rgba(0, 0, 0, 0) 1.5%,
rgba(0, 0, 0, 0.16) 8.95%,
#000 98.39%
)`};
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 0.375rem;
width: 100%;
background: ${r=>r.borderColor||"transparent"};
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
&:hover::after {
transform: scaleX(1); /* ide na 100% */
}
& .wrapper__image {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 0.75rem;
mix-blend-mode: multiply;
transition: var(--transiton, all 0.2s ease);
&:hover {
transform: scale(1.2);
}
}
& .wrapper__image--skeleton {
width: 24.5rem;
height: 30rem;
border-radius: 0.75rem;
background-color: ${i.linearGradientAnimation("-90deg")};
}
& .wrapper__text {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 1rem;
position: absolute;
bottom: 0;
left: 0;
gap: 0.75rem;
& .text__title {
transition: var(--transiton, all 0.2s ease);
color: var(--white, #ffffff);
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: 1.5rem;
${i.truncateTextInRows(2)}
}
& .text__tag {
background-color: var(--warning-600, #d97706);
color: var(--white, #ffffff);
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
padding: 0.25rem 0.5rem;
border-radius: 0.375rem;
background: var(--warning-600, #d97706);
}
& .text__description {
color: var(--white);
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 1.25rem;
${i.truncateTextInRows(2)}
}
& .text__action {
background-color: var(--white, #fff);
color: var(--neutral-600, #0f2a46);
border: 1px solid var(--gray-200, #e4e9f0);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
0 1px 2px 0 rgba(0, 0, 0, 0.06);
transition: var(--transiton, all 0.2s ease);
&:hover {
background-color: var(--gray-200, #e4e9f0);
}
}
& .text__title--skeleton {
background-color: ${i.linearGradientAnimation("-90deg")};
height: 1rem;
width: 9rem;
}
& .text__description--skeleton {
background-color: ${i.linearGradientAnimation("-90deg")};
height: 1rem;
width: 12rem;
}
& .text__action--skeleton {
background-color: ${i.linearGradientAnimation("-90deg")};
height: 2rem;
width: 9rem;
}
}
cursor: pointer;
@media ${d.down("S")} {
& .wrapper__image {
height: 100%;
max-height: 14.5rem;
}
}
`,k=x.forwardRef(({title:r,imageUrl:t,description:o,buttonText:a,onSelectCard:c=()=>{},className:m,position:g,tag:s,backgroundColor:h,borderColor:u,buttonLink:p,LinkComponent:f},w)=>{const _=f||"a",b=y.useTheme();return e.jsx(e.Fragment,{children:e.jsxs(v,{ref:w,theme:b,className:m,position:g,backgroundColor:h,onClick:c,as:_,borderColor:u,...f?{to:`/${p}`}:{href:`/${p}`},children:[e.jsx("img",{src:t,className:"wrapper__image",loading:"lazy"}),e.jsxs("div",{className:"wrapper__text",children:[s&&e.jsx("div",{className:"text__tag",children:s}),e.jsx("div",{className:"text__title",children:r}),i.isDefinedNotEmptyString(o)&&e.jsx("div",{className:"text__description",children:o}),i.isDefinedNotEmptyString(a)&&e.jsx(j,{text:a,className:"text__action",color:"gray"})]})]})})}),S=l.styled.div`
display: flex;
flex-direction: column;
gap: 1.5rem;
& .regular-title {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: space-between;
font-size: 1.5rem;
font-weight: 600;
& .regular-title-text {
display: flex;
gap: 0.5rem;
align-items: center;
}
& i {
font-size: 1.5rem;
color: var(--primary-500, #f59e0b);
}
}
@media ${d.down("S")} {
& .regular-title {
font-size: 1.375rem;
&.center {
justify-content: center;
}
}
}
`,$=l.styled.div`
display: grid;
grid-template-columns: ${()=>"repeat(12, minmax(0, 1fr))"};
grid-template-rows: 15rem 15rem;
grid-column-gap: 1.25rem;
grid-row-gap: 1.25rem;
height: 30rem;
max-height: 30rem;
@media ${d.down("S")} {
display: flex;
flex-direction: column;
gap: 1.25rem;
width: 100%;
height: 100%;
max-height: 100%;
}
`,C=l.styled(n.SkeletonAnimationContainer)`
@media ${d.down("S")} {
flex-direction: column;
& .skeleton__big {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
}
& > div {
flex-direction: column;
}
}
`,N=({keyPrefix:r})=>e.jsxs(C,{children:[e.jsx(n.SkeletonColumnContainer,{children:e.jsx(n.SkeletonRect,{height:"31.25rem",className:"skeleton__big",width:"100%"},`${r}-1`)}),e.jsxs(n.SkeletonColumnContainer,{children:[e.jsxs(n.SkeletonContainer,{children:[e.jsx(n.SkeletonRect,{width:"100%",height:"15rem"},`${r}-2`),e.jsx(n.SkeletonRect,{width:"100%",height:"15rem"},`${r}-3`)]}),e.jsxs(n.SkeletonContainer,{children:[e.jsx(n.SkeletonRect,{width:"100%",height:"15rem"},`${r}-4`),e.jsx(n.SkeletonRect,{width:"100%",height:"15rem"},`${r}-5`)]})]})]}),R=({keyPrefix:r,isLoading:t=!1,fallbackComponent:o=e.jsx(e.Fragment,{}),children:a})=>e.jsx(x.Suspense,{fallbackComponent:o,children:t===!0?e.jsx(N,{keyPrefix:r}):a}),G=x.forwardRef(({title:r,items:t,isLoading:o=!1,limit:a=3,onSelectCard:c=()=>{},LinkComponent:m},g)=>e.jsxs(S,{ref:g,className:"lp-section lp-general-section lp-masonry-general-cards-section",children:[e.jsx("div",{className:"regular-title",children:e.jsx("div",{className:"regular-title-text",children:e.jsx("span",{children:r})})}),e.jsx(R,{isLoading:o,keyPrefix:"masonry-general-cards-skeleton",children:e.jsx($,{limit:a,children:t&&(t==null?void 0:t.map((s,h)=>e.jsx(k,{...s,onSelectCard:()=>c(s),LinkComponent:m},`landing-page-masonry-general-card__${h+1}`)))})})]}));module.exports=G;