@lanaco/lnc-react-ui
Version:
React component library
261 lines (247 loc) • 7.55 kB
JavaScript
import { jsxs as t, jsx as r, Fragment as w } from "react/jsx-runtime";
import { forwardRef as v, Suspense as D, memo as O, useMemo as B } from "react";
import { n as k } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as C } from "./consts-C1uHV4xc.js";
import { u as P } from "./useDetectMobile-BC6EGaBc.js";
import { m as b, t as T, k as y } from "./utils-DtRLzzTZ.js";
import { B as L, R as z } from "./style-CiePxaJ_.js";
import M from "./Button.js";
const R = k.div`
display: grid;
grid-template-columns: ${(i) => `repeat(${i.limit}, minmax(0, 1fr))`};
gap: 1.25rem;
@media (max-width: ${C + "px"}) {
grid-template-columns: repeat(1, 1fr);
}
`, S = k.div`
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;
max-height: 21.5625rem;
min-height: 21.5625rem;
cursor: pointer;
&:hover {
& .text-wr-title {
color: var(--primary-500, #f59e0b);
transition: var(--transition);
}
}
& img {
max-height: 11.0625rem;
min-height: 11.0625rem;
object-fit: cover;
width: 100%;
}
& .skeleton-img {
width: 100%;
max-height: 11.0625rem;
min-height: 11.0625rem;
background-color: ${b("-90deg")};
}
& .tags-wr {
margin-top: auto;
display: flex;
gap: 0.5rem;
padding: 0 1rem 1rem 1rem;
}
@media (max-width: ${C + "px"}) {
}
`, $ = k.div`
padding: 1rem 1rem 0 1rem;
display: flex;
flex-direction: column;
gap: 0;
color: var(--gray-950, #14161a);
border-top: 1px solid var(--gray-95008, #14161a14);
& .text-wr-title {
font-weight: 600;
font-size: 1rem;
}
& .info-wr-skeleton {
background-color: ${b("-90deg")};
height: 1rem;
width: 100%;
}
& .skeleton-title {
background-color: ${b("-90deg")};
height: 1.5rem;
width: 70%;
}
& .text-wr {
font-weight: 400;
font-size: 0.875rem;
flex: 1;
color: var(--gray-700, #4e555f);
${T(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;
& .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;
}
`, j = v((i, s) => {
const {
title: a,
image: d,
text: l,
numberOfLikes: n,
numberOfComments: u,
readDuration: m,
datePublished: c,
tags: g,
onCardClick: f,
timeToReadText: p = "read"
} = i;
return (
// <BlogCardDetailedSkeleton />
/* @__PURE__ */ t(S, { ref: s, className: "blog-card", onClick: f, children: [
/* @__PURE__ */ r("img", { src: d }),
/* @__PURE__ */ t($, { children: [
/* @__PURE__ */ t("div", { className: "info-wr", children: [
/* @__PURE__ */ t("div", { className: "info-wr-1", children: [
/* @__PURE__ */ r("span", { children: c }),
/* @__PURE__ */ r("span", { className: "small-dot", children: "●" }),
m && p ? `${m} ${p}` : "N/A"
] }),
/* @__PURE__ */ t("div", { className: "info-wr-2", children: [
/* @__PURE__ */ t("span", { className: "info-wr-1", children: [
/* @__PURE__ */ r("i", { className: "mng mng-lnc-thumbs-up--filled" }),
/* @__PURE__ */ r("span", { children: n })
] }),
/* @__PURE__ */ t("span", { className: "info-wr-1", children: [
/* @__PURE__ */ r("i", { className: "mng mng-lnc-messages-filled" }),
/* @__PURE__ */ r("span", { children: u })
] })
] })
] }),
/* @__PURE__ */ r("div", { className: "text-wr-title", children: a }),
/* @__PURE__ */ r("div", { className: "text-wr", children: l })
] }),
/* @__PURE__ */ r("div", { className: "tags-wr", children: g == null ? void 0 : g.map((o, e) => /* @__PURE__ */ r(L, { color: o == null ? void 0 : o.color, children: o == null ? void 0 : o.name }, e)) })
] })
);
}), A = v(({}, i) => /* @__PURE__ */ t(S, { className: "blog-card", children: [
/* @__PURE__ */ r("div", { className: "skeleton-img" }),
/* @__PURE__ */ t($, { children: [
/* @__PURE__ */ r("div", { className: "info-wr" }),
/* @__PURE__ */ r("div", { className: "skeleton-title" }),
/* @__PURE__ */ r("div", { className: "info-wr-skeleton" })
] })
] })), W = ({ limit: i = 3, isLoading: s = !1, keyPrefix: a }) => /* @__PURE__ */ r(w, { children: Array.from({ length: i }, (d, l) => /* @__PURE__ */ r(
A,
{
isLoading: s
},
`${a}-skeleton-product-card-${l}`
)) }), E = ({
children: i,
fallbackComponent: s = /* @__PURE__ */ r(w, {}),
isLoading: a = !1,
limit: d,
keyPrefix: l
}) => /* @__PURE__ */ r(D, { fallbackComponent: s, children: a === !0 ? /* @__PURE__ */ r(
W,
{
isLoading: a,
limit: d,
keyPrefix: l
}
) : i }), N = O(j), J = v((i, s) => {
const {
icon: a,
title: d,
onButtonAction: l,
items: n,
buttonText: u,
limit: m = 3,
onSelectCard: c = () => {
},
isLoading: g = !1,
buttonLink: f
} = i, p = P(), o = B(() => /* @__PURE__ */ r(w, { children: p === !0 ? n == null ? void 0 : n.map((e, h) => /* @__PURE__ */ r(
N,
{
title: e == null ? void 0 : e.title,
image: e == null ? void 0 : e.image,
text: e == null ? void 0 : e.text,
titleSlug: e == null ? void 0 : e.titleSlug,
numberOfLikes: e == null ? void 0 : e.numberOfLikes,
numberOfComments: e == null ? void 0 : e.numberOfComments,
datePublished: e == null ? void 0 : e.date,
readDuration: e == null ? void 0 : e.readDuration,
tags: e == null ? void 0 : e.tags,
onCardClick: () => c(e == null ? void 0 : e.uuid)
},
h
)) : n == null ? void 0 : n.slice(0, m).map((e, h) => /* @__PURE__ */ r(
N,
{
title: e == null ? void 0 : e.title,
image: e == null ? void 0 : e.image,
text: e == null ? void 0 : e.text,
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,
datePublished: e == null ? void 0 : e.date,
readDuration: e == null ? void 0 : e.readDuration,
onCardClick: () => c(e == null ? void 0 : e.uuid)
},
h
)) }), [n, p, m, c]);
return /* @__PURE__ */ t(z, { ref: s, children: [
/* @__PURE__ */ t("div", { className: "regular-title", children: [
/* @__PURE__ */ t("div", { className: "regular-title-text", children: [
y(a) && /* @__PURE__ */ r("i", { className: a }),
/* @__PURE__ */ r("span", { children: d })
] }),
y(l) && /* @__PURE__ */ r(
M,
{
type: "button",
btnType: "tinted",
color: "gray",
onClick: () => l(f),
borderRadius: "curved",
children: u
}
)
] }),
/* @__PURE__ */ r(R, { limit: m, children: /* @__PURE__ */ r(
E,
{
isLoading: g,
limit: m,
keyPrefix: "explore-landing",
children: o
}
) })
] });
});
export {
J as default
};