@lanaco/lnc-react-ui
Version:
React component library
277 lines (260 loc) • 7.56 kB
JavaScript
import { jsx as t, Fragment as C, jsxs as $ } from "react/jsx-runtime";
import { forwardRef as y, Suspense as F } from "react";
import { m as k } from "./utils-BUdHa0nB.js";
import { s as v } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as g } from "./breakpoints-BubDitvo.js";
import { S as N } from "./index-BDBTaPXr.js";
import { S, f as W, a as j } from "./style-NhzYtIA7.js";
const A = v.div`
width: 100%;
height: auto;
border-radius: 999px;
&:hover {
cursor: pointer;
}
& .wrapper__image {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 999px;
max-height: 9.875rem;
}
&.active {
border: var(--yellow-600, #d97706);
}
@media ${g("S")} {
& .wrapper__image {
height: auto;
}
}
`, I = y(
({ isActive: i, image: s, imageComponent: r, onSelectCard: n = () => {
} }, l) => /* @__PURE__ */ t(
A,
{
ref: l,
className: i ? "active" : "",
onClick: n,
children: k(r) ? r : /* @__PURE__ */ t("img", { src: s, className: "wrapper__image" })
}
)
), O = y(
({
uuid: i,
title: s,
price: r,
currency: n,
isNegotiable: l,
isFree: f,
image: h,
sellerUuid: o,
onSelectCard: m = () => {
},
imageComponent: a,
negotiableText: _ = "Negotiable",
freeText: u = "Free",
nameSlug: d,
LinkComponent: w
}, p) => /* @__PURE__ */ t(
N,
{
ref: p,
uuid: i,
title: s,
price: r,
currency: n,
isNegotiable: l,
isFree: f,
image: h,
imageComponent: a,
sellerUuid: o,
onSelectCard: m,
negotiableText: _,
freeText: u,
nameSlug: d,
LinkComponent: w
}
)
), T = v.div`
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
& .wrapper__heading {
display: flex;
flex-direction: column;
gap: 1rem;
text-align: center;
& .wrapper__title {
color: var(--gray-950, #14161a);
text-align: center;
font-size: 1.5rem;
font-style: normal;
font-weight: 600;
line-height: 2rem;
letter-spacing: -0.47px;
}
& .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__avatars {
display: grid;
grid-template-columns: ${(i) => `repeat(${i == null ? void 0 : i.limitAvatars}, minmax(0, 1fr))`};
gap: 2rem;
justify-items: center;
align-items: center;
}
& .wrapper__cards {
display: grid;
grid-template-columns: ${(i) => `repeat(${i == null ? void 0 : i.limitCards}, minmax(0, 1fr))`};
gap: 1.25rem;
justify-items: center;
align-items: center;
width: 100%;
}
@media ${g("M")} {
& .wrapper__cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media ${g("S")} {
& .wrapper__avatars {
grid-template-columns: ${(i) => `repeat(${i == null ? void 0 : i.limitAvatarsForMobile}, minmax(0, 1fr))`};
gap: auto;
}
& .wrapper__cards {
grid-template-columns: ${(i) => `repeat(${i == null ? void 0 : i.limitCardsForMobile}, minmax(0, 1fr))`};
gap: 1rem;
}
}
`, b = v(S)`
&.skeleton__tags {
max-width: 50rem;
}
@media ${g("S")} {
&.skeleton__tags {
overflow-x: hidden;
& > div {
width: 3rem;
height: 3rem;
}
}
&.skeleton__cards {
display: grid;
grid-template-columns: 1fr 1fr;
& > div {
height: 7rem;
}
}
}
`, M = ({ keyPrefix: i }) => /* @__PURE__ */ t(b, { className: "skeleton__tags", justifyContent: "center", children: [1, 2, 3, 4].map((s) => /* @__PURE__ */ t(W, { size: "9.875rem" }, `${i}-${s}`)) }), z = ({
keyPrefix: i,
isLoading: s = !1,
fallbackComponent: r = /* @__PURE__ */ t(C, {}),
children: n
}) => /* @__PURE__ */ t(F, { fallbackComponent: r, children: s === !0 ? /* @__PURE__ */ t(M, { keyPrefix: i }) : n }), P = ({ keyPrefix: i }) => /* @__PURE__ */ t(b, { className: "skeleton__cards", justifyContent: "center", children: [1, 2, 3, 4].map((s) => /* @__PURE__ */ t(
j,
{
width: "100%",
height: "13.75rem"
},
`${i}-${s}`
)) }), L = ({
keyPrefix: i,
isLoading: s = !1,
fallbackComponent: r = /* @__PURE__ */ t(C, {}),
children: n
}) => /* @__PURE__ */ t(F, { fallbackComponent: r, children: s === !0 ? /* @__PURE__ */ t(P, { keyPrefix: i }) : n }), H = y(
({
title: i,
subtitle: s,
avatars: r = [],
limitAvatars: n = 4,
limit: l = 6,
limitAvatarsForMobile: f = 4,
limitForMobile: h = 2,
items: o = [],
onSelectAvatar: m = () => {
},
onSelectCard: a = () => {
},
isLoadingTags: _ = !1,
isLoadingCards: u = !1,
LinkComponent: d
}, w) => {
const p = (e) => {
m == null || m(e);
}, x = (e) => {
a == null || a(e);
};
return /* @__PURE__ */ $(
T,
{
ref: w,
limitAvatars: n,
limitAvatarsForMobile: f,
limitCards: l,
limitCardsForMobile: h,
className: "lp-section lp-field-of-interests-with-avatars-cards-section",
children: [
/* @__PURE__ */ $("div", { className: "wrapper__heading", children: [
i && /* @__PURE__ */ t("div", { className: "wrapper__title", children: i }),
s && /* @__PURE__ */ t("div", { className: "wrapper__subtitle", children: s })
] }),
/* @__PURE__ */ t(
z,
{
isLoading: _,
keyPrefix: "field-of-interests-with-avatars-tag",
children: /* @__PURE__ */ t("div", { className: "wrapper__avatars", children: r == null ? void 0 : r.map((e, c) => /* @__PURE__ */ t(
I,
{
image: e == null ? void 0 : e.image,
imageComponent: e == null ? void 0 : e.imageComponent,
onSelectCard: () => p == null ? void 0 : p(e)
},
`field-of-interests-with-avatars-card-avatar__${c + 1}`
)) })
}
),
/* @__PURE__ */ t(
L,
{
isLoading: u,
keyPrefix: "field-of-interests-with-avatars-card",
children: /* @__PURE__ */ t("div", { className: "wrapper__cards", children: o == null ? void 0 : o.map((e, c) => /* @__PURE__ */ t(
O,
{
uuid: e == null ? void 0 : e.uuid,
title: e == null ? void 0 : e.title,
price: e == null ? void 0 : e.price,
currency: e == null ? void 0 : e.currency,
isNegotiable: e == null ? void 0 : e.isNegotiable,
isFree: e == null ? void 0 : e.isFree,
image: e == null ? void 0 : e.image,
imageComponent: e == null ? void 0 : e.imageComponent,
sellerUuid: e == null ? void 0 : e.sellerUuid,
negotiableText: e == null ? void 0 : e.negotiableText,
freeText: e == null ? void 0 : e.freeText,
onSelectCard: () => x == null ? void 0 : x(e),
nameSlug: e == null ? void 0 : e.nameSlug,
LinkComponent: d
},
`field-of-interests-with-avatars-card__${c + 1}`
)) })
}
)
]
}
);
}
);
export {
H as default
};