@lanaco/lnc-react-ui
Version:
React component library
213 lines (181 loc) • 7.66 kB
JavaScript
"use strict";const r=require("react/jsx-runtime"),d=require("react"),i=require("./utils-BK6B_Y9X.cjs"),y=require("./Icon.cjs"),R=require("./style-cJUZrJoG.cjs"),$=require("./index-DOkcmaFO.cjs"),N=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),v=require("./breakpoints-CcVm-gVm.cjs"),z=require("./Button.cjs"),q=require("./index-xecdLwlt.cjs"),k=N.styled.a`
text-decoration: none;
color: var(--gray-950);
display: flex;
padding: 1rem;
align-items: center;
gap: 1.25rem;
border-radius: 1.25rem;
align-items: stretch;
border: ${t=>t!=null&&t.isSponsored?"2px solid var(--yellow-500, #f59e0b)":"1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08))"};
background: var(--white, #fff);
min-height: 10.5rem;
position: relative;
width: 100%;
&:hover {
cursor: pointer;
}
& .wrapper__sponsored {
position: absolute;
top: -0.5rem;
right: -0.5rem;
background: var(--yellow-500, #f59e0b);
height: 2rem;
width: 2rem;
border-radius: 999px;
& span {
margin-top: 2px;
}
& i {
color: var(--white, #fff);
}
}
& .wrapper__image {
width: 100%;
object-fit: cover;
height: auto;
max-width: 12.5rem;
min-width: 12.5rem;
max-height: 9rem;
border-radius: 0.75rem;
}
& .wrapper__content {
display: flex;
width: 100%;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
& .wrapper__subcontent {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
& .wrapper__title {
color: var(--gray-950, #14161a);
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 1.5rem;
letter-spacing: 0.1px;
${i.truncateTextInRows(2)}
}
& .wrapper__tags {
display: flex;
gap: 0.25rem;
flex-wrap: wrap;
}
}
& .wrapper__info {
display: flex;
justify-content: space-between;
width: 100%;
& .info__text {
display: flex;
gap: 0.5rem;
color: var(--gray-600, #676e79);
font-size: 0.75rem;
font-style: normal;
font-weight: 400;
line-height: 1rem;
letter-spacing: 0.4px;
& i {
color: var(--gray-300, #bcc4cf);
}
}
}
}
@media ${v.down("S")} {
flex-direction: column;
padding: 0;
& .wrapper__image {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
max-width: 100%;
min-width: 100%;
}
& .wrapper__content {
gap: 1rem;
padding: 0 1rem 1rem 1rem;
& .wrapper__subcontent {
order: 1;
}
& .wrapper__info {
gap: 0.5rem;
justify-content: space-between;
order: 0;
}
}
}
`,x=d.forwardRef(({title:t,imageUrl:p,options:n,publishedAt:m,timeToReadText:g="{0} min read",timeToRead:h=0,numberOfLikes:o=0,numberOfComments:c=0,isSponsored:l=!1,onSelectCard:f=()=>{},metadata:a,titleSlug:_,LinkComponent:u},j)=>{const w=u||"a",s=d.useRef();return r.jsxs(k,{ref:s,isSponsored:l,"data-accessor":a==null?void 0:a.accessor,name:a==null?void 0:a.name,onClick:e=>f(e,s),as:w,...u?{to:`/blog/${_}`}:{href:`/blog/${_}`},children:[l&&r.jsx("div",{className:"wrapper__sponsored",children:r.jsx(y,{icon:" mng-lnc-paw",sizeInUnits:"1.5rem"})}),r.jsx($.ProductImageWrapper,{src:p,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[r.jsxs("div",{className:"wrapper__subcontent",children:[r.jsx("div",{className:"wrapper__title",children:t}),r.jsx("div",{className:"wrapper__tags",children:n&&(n==null?void 0:n.map((e,b)=>r.jsx(R.BlogTag,{color:e==null?void 0:e.color,children:e==null?void 0:e.name},b)))})]}),r.jsxs("div",{className:"wrapper__info",children:[r.jsx("div",{className:"info__text",children:`${i.formatLocaleDateString(m)} • ${i.formatString(g,h)}`}),r.jsxs("div",{className:"info__text",children:[r.jsxs("div",{children:[r.jsx(y,{icon:" mng-lnc-thumbs-up--filled",sizeInUnits:"1rem"}),i.getRoundedNumber(o)]}),r.jsxs("div",{children:[r.jsx(y,{icon:" mng-lnc-messages-filled",sizeInUnits:"1rem"}),i.getRoundedNumber(c)]})]})]})]})]})}),I=N.styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
& .wrapper__heading {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
& .wrapper__title {
display: flex;
justify-content: space-between;
& .title__text {
color: var(--gray-950, #14161a);
${i.truncateTextInRows(2)}
font-size: 1.5rem;
font-style: normal;
font-weight: 600;
line-height: 2rem;
letter-spacing: -0.47px;
display: flex;
align-items: center;
gap: 0.5rem;
& i {
font-size: 1.5rem;
color: var(--primary-500, #f59e0b);
}
}
& .title__action {
/* color: var(--gray-950, #14161a);
background: var(--neutral-9504, rgba(20, 22, 26, 0.04)); */
white-space: nowrap;
/* &:hover {
background: var(--neutral-9504, rgba(20, 22, 26, 0.12));
} */
&:focus {
outline: none;
}
}
}
& .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__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
justify-items: center;
align-items: center;
width: 100%;
}
@media ${v.down("S")} {
gap: 1.25rem;
& .wrapper__title {
& .title__text {
font-size: 1.375rem;
}
}
}
@media ${v.down("XS")} {
& .wrapper__cards {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
}
`,C=d.memo(x),T=d.forwardRef(({title:t,subtitle:p,icon:n,buttonText:m,buttonLink:g,timeToReadText:h="{0} min read",items:o,onButtonAction:c=()=>{},onSelectCard:l=()=>{},isLoading:f=!1,getImage:a=()=>{},componentName:_,LinkComponent:u},j)=>{const w=d.useMemo(()=>{var s;return(s=o==null?void 0:o.slice(0,4))==null?void 0:s.map((e,b)=>r.jsx(C,{title:e==null?void 0:e.title,titleSlug:e==null?void 0:e.titleSlug,options:e==null?void 0:e.options,publishedAt:e==null?void 0:e.publishedAt,timeToReadText:h,timeToRead:e==null?void 0:e.timeToRead,numberOfLikes:e==null?void 0:e.numberOfLikes,numberOfComments:e==null?void 0:e.numberOfComments,isSponsored:e==null?void 0:e.isSponsored,onSelectCard:(U,S)=>l==null?void 0:l(e,S),imageUrl:a(e==null?void 0:e.imageUrl,e==null?void 0:e.uuid)||null,metadata:{name:_,accessor:e==null?void 0:e.accessor},LinkComponent:u},`blog-card-sponsored__${b+1}`))},[o]);return r.jsxs(I,{ref:j,className:"lp-section lp-blog-cards-sponsored-section",children:[r.jsxs("div",{className:"wrapper__heading",children:[r.jsxs("div",{className:"wrapper__title",children:[t&&r.jsxs("div",{className:"title__text",children:[i.isDefinedNotEmptyString(n)&&r.jsx("i",{className:n}),r.jsx("span",{children:t})]}),i.isDefinedNotEmptyString(m)&&i.isDefinedNotEmptyString(g)&&!f&&r.jsx(z,{text:m,borderRadius:"curved",btnType:"tinted",className:"title__action",color:"neutral",onClick:s=>{var e;(e=s==null?void 0:s.target)==null||e.blur(),c==null||c(g)}})]}),p&&r.jsx("div",{className:"wrapper__subtitle",children:p})]}),r.jsx(q.SuspenseBlogCardsSponsored,{isLoading:f,keyPrefix:"blog-cards-sponsored-skeleton",children:r.jsx("div",{className:"wrapper__cards",children:w})})]})});module.exports=T;