@lanaco/lnc-react-ui
Version:
React component library
262 lines (249 loc) • 7.84 kB
JavaScript
import { jsxs as r, jsx as t, Fragment as $ } from "react/jsx-runtime";
import { forwardRef as L, useRef as B, memo as A, useMemo as z } from "react";
import { s as S } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as w } from "./breakpoints-BubDitvo.js";
import { u as D } from "./useDetectMobile-B0Jog4jQ.js";
import { n as j, q as M, s as U, v as R, l as C } from "./utils-BUdHa0nB.js";
import { B as W, R as P } from "./style-CP_urKvc.js";
import I from "./Button.js";
import { P as q } from "./index-DxYmn1al.js";
import { S as E } from "./index-CsBUrEws.js";
const F = S.div`
display: grid;
grid-template-columns: ${(l) => `repeat(${l.limit}, minmax(0, 1fr))`};
gap: 1.25rem;
@media ${w("M")} {
grid-template-columns: repeat(2, 1fr);
}
@media ${w("S")} {
grid-template-columns: repeat(2, 1fr);
}
@media ${w("XS")} {
grid-template-columns: repeat(1, 1fr);
}
`, G = S.a`
text-decoration: none;
color: var(--gray-950);
display: flex;
flex-direction: column;
width: 100%;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
0px 1px 2px 0px rgba(0, 0, 0, 0.06);
background-color: var(--white, #fff);
border-radius: 0.75rem;
border: 1px solid var(--gray-95008, #14161a14);
overflow: hidden;
min-height: 23rem;
cursor: pointer;
height: 100%;
& .blog-card-content {
display: flex;
padding: 1rem;
flex-direction: column;
justify-content: space-between;
height: 100%;
border-top: 1px solid var(--gray-95008, #14161a14);
gap: 1.25rem;
}
& img {
max-height: 12.5rem;
min-height: 12.5rem;
object-fit: cover;
width: 100%;
}
& .tags-wr {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
@media ${w("S")} {
max-height: 100%;
min-height: 100%;
}
`, X = S.div`
display: flex;
flex-direction: column;
gap: 0;
color: var(--gray-950, #14161a);
& .text-wr-title {
font-weight: 600;
font-size: 1rem;
}
& .text-wr {
font-weight: 400;
font-size: 0.875rem;
flex: 1;
color: var(--gray-700, #4e555f);
${j(2)}
}
& .info-wr {
display: flex;
align-items: center;
gap: 0.25rem;
justify-content: space-between;
color: var(--gray-600, #676e79);
font-size: 0.75rem;
font-weight: 400;
padding-bottom: 0.75rem;
& .mng {
font-size: 0.875rem;
color: var(--gray-300, #c4c8cf);
}
}
& .info-wr-1 {
display: flex;
align-items: center;
gap: 0.25rem;
}
& .info-wr-2 {
display: flex;
align-items: center;
gap: 1rem;
}
`, H = L((l, k) => {
const {
title: g,
imageUrl: v,
text: y,
numberOfLikes: i,
numberOfComments: f,
timeToRead: s,
publishedAt: m,
tags: o,
onCardClick: u,
timeToReadText: c = "{0} min read",
metadata: a,
titleSlug: d,
LinkComponent: p
} = l, h = p || "a", b = B();
return /* @__PURE__ */ r(
G,
{
ref: b,
className: "blog-card",
"data-accessor": a == null ? void 0 : a.accessor,
name: a == null ? void 0 : a.name,
onClick: (e) => u(e, b),
as: h,
...p ? { to: `/blog/${d}` } : { href: `/blog/${d}` },
children: [
/* @__PURE__ */ t(q, { src: v }),
/* @__PURE__ */ r("div", { className: "blog-card-content", children: [
/* @__PURE__ */ r(X, { children: [
/* @__PURE__ */ r("div", { className: "info-wr", children: [
/* @__PURE__ */ r("div", { className: "info-wr-1", children: [
/* @__PURE__ */ r("span", { children: [
M(m),
" "
] }),
/* @__PURE__ */ t("span", { className: "small-dot", children: "●" }),
s && c ? `${U(c, s)}` : "N/A"
] }),
/* @__PURE__ */ r("div", { className: "info-wr-2", children: [
/* @__PURE__ */ r("span", { className: "info-wr-1", children: [
/* @__PURE__ */ t("i", { className: "mng mng-lnc-thumbs-up--filled" }),
/* @__PURE__ */ t("span", { children: R(i) })
] }),
/* @__PURE__ */ r("span", { className: "info-wr-1", children: [
/* @__PURE__ */ t("i", { className: "mng mng-lnc-messages-filled" }),
/* @__PURE__ */ t("span", { children: R(f) })
] })
] })
] }),
/* @__PURE__ */ t("div", { className: "text-wr-title", children: g }),
/* @__PURE__ */ t("div", { className: "text-wr", children: y })
] }),
o && /* @__PURE__ */ t("div", { className: "tags-wr", children: o == null ? void 0 : o.map((e, n) => /* @__PURE__ */ t(W, { color: e == null ? void 0 : e.color, children: e == null ? void 0 : e.name }, n)) })
] })
]
}
);
}), T = A(H), re = L((l, k) => {
const {
icon: g,
title: v,
onButtonAction: y,
items: i,
buttonText: f,
timeToReadText: s,
limit: m = 3,
onSelectCard: o = () => {
},
isLoading: u = !1,
buttonLink: c,
getImage: a = () => {
},
componentName: d,
LinkComponent: p
} = l, h = D(), b = z(() => /* @__PURE__ */ t($, { children: h === !0 ? i == null ? void 0 : i.map((e, n) => /* @__PURE__ */ t(
T,
{
title: e == null ? void 0 : e.title,
text: e == null ? void 0 : e.description,
titleSlug: e == null ? void 0 : e.titleSlug,
numberOfLikes: e == null ? void 0 : e.numberOfLikes,
numberOfComments: e == null ? void 0 : e.numberOfComments,
publishedAt: e == null ? void 0 : e.publishedAt,
timeToRead: e == null ? void 0 : e.timeToRead,
timeToReadText: s,
tags: e == null ? void 0 : e.tags,
onCardClick: (O, N) => o(e == null ? void 0 : e.titleSlug, N),
imageUrl: a(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
metadata: { name: d, accessor: e == null ? void 0 : e.accessor },
LinkComponent: p
},
n
)) : i == null ? void 0 : i.slice(0, m).map((e, n) => /* @__PURE__ */ t(
T,
{
title: e == null ? void 0 : e.title,
imageUrl: a(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
text: e == null ? void 0 : e.description,
titleSlug: e == null ? void 0 : e.titleSlug,
tags: e == null ? void 0 : e.tags,
numberOfLikes: e == null ? void 0 : e.numberOfLikes,
numberOfComments: e == null ? void 0 : e.numberOfComments,
publishedAt: e == null ? void 0 : e.publishedAt,
timeToRead: e == null ? void 0 : e.timeToRead,
timeToReadText: s,
onCardClick: (O, N) => o(e == null ? void 0 : e.titleSlug, N),
metadata: { name: d, accessor: e == null ? void 0 : e.accessor },
LinkComponent: p
},
n
)) }), [i, h, m, o]);
return /* @__PURE__ */ r(P, { ref: k, className: "lp-section lp-blogs-section-detailed", children: [
/* @__PURE__ */ r("div", { className: "regular-title", children: [
/* @__PURE__ */ r("div", { className: "regular-title-text", children: [
C(g) && /* @__PURE__ */ t("i", { className: g }),
/* @__PURE__ */ t("span", { children: v })
] }),
C(f) && C(c) && !u && /* @__PURE__ */ t(
I,
{
type: "button",
btnType: "tinted",
color: "neutral",
onClick: (e) => {
var n;
(n = e == null ? void 0 : e.target) == null || n.blur(), y(c);
},
borderRadius: "curved",
className: "button-link",
children: f
}
)
] }),
/* @__PURE__ */ t(
E,
{
isLoading: u,
keyPrefix: "blogs-detailed-skeleton",
children: /* @__PURE__ */ t(F, { limit: m, children: b })
}
)
] });
});
export {
re as default
};