@lanaco/lnc-react-ui
Version:
React component library
357 lines (325 loc) • 9.53 kB
JavaScript
import { jsxs as a, jsx as r } from "react/jsx-runtime";
import { forwardRef as $, useRef as R, memo as I, useMemo as C } from "react";
import { n as z, q as U, s as B, v as S, l as b } from "./utils-BUdHa0nB.js";
import v from "./Icon.js";
import { B as O } from "./style-CP_urKvc.js";
import { P as T } from "./index-DxYmn1al.js";
import { s as j } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as y } from "./breakpoints-BubDitvo.js";
import P from "./Button.js";
import { S as W } from "./index-Bclu4KBK.js";
const D = j.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;
${z(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 ${y("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;
}
}
}
`, M = $(
({
title: t,
imageUrl: m,
options: s,
publishedAt: c,
timeToReadText: d = "{0} min read",
timeToRead: h = 0,
numberOfLikes: n = 0,
numberOfComments: p = 0,
isSponsored: l = !1,
onSelectCard: f = () => {
},
metadata: o,
titleSlug: g,
LinkComponent: _
}, N) => {
const w = _ || "a", i = R();
return /* @__PURE__ */ a(
D,
{
ref: i,
isSponsored: l,
"data-accessor": o == null ? void 0 : o.accessor,
name: o == null ? void 0 : o.name,
onClick: (e) => f(e, i),
as: w,
..._ ? { to: `/blog/${g}` } : { href: `/blog/${g}` },
children: [
l && /* @__PURE__ */ r("div", { className: "wrapper__sponsored", children: /* @__PURE__ */ r(v, { icon: " mng-lnc-paw", sizeInUnits: "1.5rem" }) }),
/* @__PURE__ */ r(T, { src: m, className: "wrapper__image" }),
/* @__PURE__ */ a("div", { className: "wrapper__content", children: [
/* @__PURE__ */ a("div", { className: "wrapper__subcontent", children: [
/* @__PURE__ */ r("div", { className: "wrapper__title", children: t }),
/* @__PURE__ */ r("div", { className: "wrapper__tags", children: s && (s == null ? void 0 : s.map((e, u) => /* @__PURE__ */ r(O, { color: e == null ? void 0 : e.color, children: e == null ? void 0 : e.name }, u))) })
] }),
/* @__PURE__ */ a("div", { className: "wrapper__info", children: [
/* @__PURE__ */ r("div", { className: "info__text", children: `${U(
c
)} • ${B(d, h)}` }),
/* @__PURE__ */ a("div", { className: "info__text", children: [
/* @__PURE__ */ a("div", { children: [
/* @__PURE__ */ r(v, { icon: " mng-lnc-thumbs-up--filled", sizeInUnits: "1rem" }),
S(n)
] }),
/* @__PURE__ */ a("div", { children: [
/* @__PURE__ */ r(v, { icon: " mng-lnc-messages-filled", sizeInUnits: "1rem" }),
S(p)
] })
] })
] })
] })
]
}
);
}
), q = j.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);
${z(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 ${y("S")} {
gap: 1.25rem;
& .wrapper__title {
& .title__text {
font-size: 1.375rem;
}
}
}
@media ${y("XS")} {
& .wrapper__cards {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
}
`, E = I(M), A = $(
({
title: t,
subtitle: m,
icon: s,
buttonText: c,
buttonLink: d,
timeToReadText: h = "{0} min read",
items: n,
onButtonAction: p = () => {
},
onSelectCard: l = () => {
},
isLoading: f = !1,
getImage: o = () => {
},
componentName: g,
LinkComponent: _
}, N) => {
const w = C(() => {
var i;
return (i = n == null ? void 0 : n.slice(0, 4)) == null ? void 0 : i.map((e, u) => /* @__PURE__ */ r(
E,
{
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: (X, k) => l == null ? void 0 : l(e, k),
imageUrl: o(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
metadata: { name: g, accessor: e == null ? void 0 : e.accessor },
LinkComponent: _
},
`blog-card-sponsored__${u + 1}`
));
}, [n]);
return /* @__PURE__ */ a(q, { ref: N, className: "lp-section lp-blog-cards-sponsored-section", children: [
/* @__PURE__ */ a("div", { className: "wrapper__heading", children: [
/* @__PURE__ */ a("div", { className: "wrapper__title", children: [
t && /* @__PURE__ */ a("div", { className: "title__text", children: [
b(s) && /* @__PURE__ */ r("i", { className: s }),
/* @__PURE__ */ r("span", { children: t })
] }),
b(c) && b(d) && !f && /* @__PURE__ */ r(
P,
{
text: c,
borderRadius: "curved",
btnType: "tinted",
className: "title__action",
color: "neutral",
onClick: (i) => {
var e;
(e = i == null ? void 0 : i.target) == null || e.blur(), p == null || p(d);
}
}
)
] }),
m && /* @__PURE__ */ r("div", { className: "wrapper__subtitle", children: m })
] }),
/* @__PURE__ */ r(
W,
{
isLoading: f,
keyPrefix: "blog-cards-sponsored-skeleton",
children: /* @__PURE__ */ r("div", { className: "wrapper__cards", children: w })
}
)
] });
}
);
export {
A as default
};