@lanaco/lnc-react-ui
Version:
React component library
256 lines (246 loc) • 6.8 kB
JavaScript
import { jsxs as l, jsx as t, Fragment as _ } from "react/jsx-runtime";
import { forwardRef as M, useRef as j, Suspense as I, memo as O, useMemo as P } from "react";
import { s as C } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as k } from "./breakpoints-BubDitvo.js";
import { u as U } from "./useDetectMobile-B0Jog4jQ.js";
import { n as D, l as v } from "./utils-BUdHa0nB.js";
import { T as K } from "./style-CP_urKvc.js";
import E from "./Button.js";
import G from "./Link.js";
import { P as H } from "./index-DxYmn1al.js";
import { S as X } from "./index-CCwfh-7A.js";
import { b as q, c as B, a as R } from "./style-NhzYtIA7.js";
const J = C.div`
display: grid;
grid-template-columns: ${(o) => `repeat(${o.limit}, minmax(0, 1fr))`};
gap: 1.25rem;
@media ${k("M")} {
grid-template-columns: repeat(2, 1fr);
}
@media ${k("S")} {
grid-template-columns: repeat(2, 1fr);
}
@media ${k("XS")} {
grid-template-columns: repeat(1, 1fr);
}
`, Q = C.a`
text-decoration: none;
color: var(--gray-950);
display: flex;
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);
border-radius: 0.75rem;
border: 1px solid var(--gray-95008);
overflow: hidden;
gap: 0.75rem;
padding: 1rem;
min-height: 10.375rem;
max-height: 10.375rem;
&:hover {
cursor: pointer;
}
& img {
max-width: 3.3125rem;
min-width: 3.3125rem;
min-height: 3.3125rem;
max-height: 3.3125rem;
border-radius: 0.75rem;
object-fit: cover;
}
& a {
margin-top: auto;
}
`, V = C.div`
display: flex;
flex-direction: column;
gap: 0.5rem;
color: var(--gray-950, #14161a);
& .text-wr-title {
font-weight: 600;
font-size: 1rem;
}
& .text-wr {
font-weight: 400;
font-size: 0.875rem;
color: var(--gray-700, #4e555f);
${D(3)}
}
`, Y = M((o, a) => {
const {
title: s,
imageUrl: c,
text: n,
buttonText: u,
onCardClick: m,
metadata: r,
link: d,
LinkComponent: g
} = o, h = g || "a", p = j(), f = (b) => {
m(b, p);
};
return /* @__PURE__ */ l(
Q,
{
ref: p,
name: r == null ? void 0 : r.name,
"data-accessor": r == null ? void 0 : r.accessor,
className: "blog-card",
onClick: f,
to: `/${d}`,
as: h,
...g ? { to: `/${d}` } : { href: `/${d}` },
children: [
/* @__PURE__ */ l(V, { children: [
/* @__PURE__ */ t("div", { className: "text-wr-title", children: s }),
/* @__PURE__ */ t("div", { className: "text-wr", children: n }),
/* @__PURE__ */ t(G, { color: "gray", onClick: f, children: u })
] }),
/* @__PURE__ */ t(H, { src: c })
]
}
);
}), Z = C(q)`
@media ${k("S")} {
& .skeleton__tags {
& > div {
width: 100%;
}
}
& .skeleton__cards {
flex-direction: column;
}
}
`, x = ({ keyPrefix: o }) => /* @__PURE__ */ l(Z, { children: [
/* @__PURE__ */ t(B, { className: "skeleton__tags", children: [1, 2, 3].map((a) => /* @__PURE__ */ t(
R,
{
height: "2.25rem",
width: "8rem",
borderRadius: "1rem"
},
`${o}-tab-${a}`
)) }),
/* @__PURE__ */ t(B, { className: "skeleton__cards", children: [1, 2, 3].map((a) => /* @__PURE__ */ t(
R,
{
height: "10.375rem",
width: "100%",
borderRadius: "1rem"
},
`${o}-card-${a}`
)) })
] }), ee = ({
keyPrefix: o,
isLoading: a = !1,
fallbackComponent: s = /* @__PURE__ */ t(_, {}),
children: c
}) => /* @__PURE__ */ t(I, { fallbackComponent: s, children: a === !0 ? /* @__PURE__ */ t(x, { keyPrefix: o }) : c }), W = O(Y), ue = M((o, a) => {
const {
icon: s,
title: c,
items: n,
buttonText: u,
limit: m = 3,
options: r,
selectedOption: d = [],
onButtonAction: g = () => {
},
buttonLink: h,
onSelectOption: p = () => {
},
onSelectAll: f = () => {
},
isLoading: b = !1,
onSelectCard: y = () => {
},
productsToolbarName: z = "All",
allButton: L = !1,
componentName: $,
LinkComponent: N
} = o, T = U(), A = P(() => {
var i;
return /* @__PURE__ */ t(_, { children: T === !0 ? n == null ? void 0 : n.map((e, S) => /* @__PURE__ */ t(
W,
{
title: e == null ? void 0 : e.title,
imageUrl: (e == null ? void 0 : e.image) || null,
text: e == null ? void 0 : e.text,
buttonText: e == null ? void 0 : e.buttonText,
onCardClick: (F, w) => y(e, w),
metadata: { name: $, accessor: e == null ? void 0 : e.accessor },
link: e == null ? void 0 : e.link,
LinkComponent: N
},
S
)) : (i = n == null ? void 0 : n.slice(0, m)) == null ? void 0 : i.map((e, S) => /* @__PURE__ */ t(
W,
{
title: e == null ? void 0 : e.title,
imageUrl: (e == null ? void 0 : e.image) || null,
text: e == null ? void 0 : e.text,
buttonText: e == null ? void 0 : e.buttonText,
onCardClick: (F, w) => y(e, w),
metadata: { name: $, accessor: e == null ? void 0 : e.accessor },
link: e == null ? void 0 : e.link,
LinkComponent: N
},
S
)) });
}, [n, T, m]);
return /* @__PURE__ */ l(K, { ref: a, className: "lp-section lp-blogs-section-with-filters", children: [
/* @__PURE__ */ l("div", { className: "regular-title", children: [
/* @__PURE__ */ l("div", { className: "regular-title-text", children: [
v(s) && /* @__PURE__ */ t("i", { className: s }),
/* @__PURE__ */ t("span", { children: c })
] }),
v(u) && v(h) && !b && /* @__PURE__ */ t(
E,
{
type: "button",
btnType: "tinted",
color: "neutral",
onClick: (i) => {
var e;
(e = i == null ? void 0 : i.target) == null || e.blur(), g(h);
},
borderRadius: "curved",
children: u
}
)
] }),
/* @__PURE__ */ l(
ee,
{
isLoading: b,
keyPrefix: "blogs-with-filters-skeleton",
children: [
(r == null ? void 0 : r.length) > 0 && /* @__PURE__ */ t(
X,
{
items: r,
selectedIds: d,
onRemove: (i) => {
p(i);
},
onSelect: (i) => {
p(i);
},
onSelectAll: f,
labelKey: "name",
valueKey: "code",
noMargin: !0,
productsToolbarName: z,
allButton: L
}
),
/* @__PURE__ */ t(J, { limit: m, children: A })
]
}
)
] });
});
export {
ue as default
};