@lanaco/lnc-react-ui 4.0.26 → 4.0.28

package/dist/index10.js

@@ -1,152 +1,254 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { forwardRef as g } from "react";
-import { n as s } from "./emotion-styled.browser.esm-BiK8DcgW.js";
-import { M as f } from "./consts-DNVz1x1I.js";
-import { u as w } from "./useDetectMobile-BookNOsk.js";
-import { R as v } from "./style-Ch-xOasu.js";
-import { t as k, m as h, l as y, k as N } from "./utils-DtEdJZWa.js";
-const S = s.div`
-  width: 100%;
-  height: 22.5rem;
-  min-height: 22.5rem;
-  max-height: 22.5rem;
-  overflow: hidden;
-  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
-    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
-  border: 1px solid var(--gray-95008, #14161a14);
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { n as p } from "./emotion-styled.browser.esm-BiK8DcgW.js";
+import { t as v, m as y, l as b } from "./utils-DtEdJZWa.js";
+import $ from "./Icon.js";
+import { u as k } from "./emotion-element-5486c51c.browser.esm-Bb4VkP8U.js";
+import { M as N } from "./consts-DNVz1x1I.js";
+const W = p.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-shrink: 0;
+  align-self: stretch;
   border-radius: 0.75rem;
-  margin-bottom: 0.5rem;
+  border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
+  background: var(--Lanaco-Gray-white, #fff);
+
+  /* drop-shadow-sm */
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
 
-  & img {
+  & .wrapper__image {
     width: 100%;
-    height: 100%;
+    aspect-ratio: 1 / 1;
     object-fit: cover;
+    height: auto;
+    border-radius: 0.75rem 0.75rem 0 0;
   }
-`, $ = s.div`
-  display: grid;
-  grid-template-columns: ${(a) => `repeat(${a.limit},  minmax(0, 1fr))`};
-  gap: 1.25rem;
 
-  @media (max-width: ${f + "px"}) {
+  & .wrapper__content {
     display: flex;
-    gap: 1rem;
-    overflow-x: auto;
+    padding: 0.75rem;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+    align-self: stretch;
 
-    -webkit-overflow-scrolling: touch;
-    ::-webkit-scrollbar {
-      -webkit-appearance: none;
+    & .wrapper__title {
+      color: var(--gray-950);
+      font-size: 1rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 1.5rem;
+      ${v(2)}
     }
-    -ms-overflow-style: none;
-    /* Internet Explorer 10+ */
-    scrollbar-width: none;
-    /* Firefox */
-
-    &::-webkit-scrollbar {
-      display: none;
-      /* Safari and Chrome */
+
+    & .wrapper__description {
+      color: var(--gray-600);
+      font-size: 0.75rem;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1rem;
+      letter-spacing: 0.025rem;
+      ${v(2)}
     }
   }
-`, j = s.div`
+`, I = p.div`
+  width: 100%;
+  height: 11.625rem;
+  border-radius: 0.75rem;
+  background: ${y("-90deg")};
+`, C = p.div`
   display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  cursor: pointer;
+  padding: 0 0.75rem 0 0;
+  align-items: center;
+  background: var(--neutral-9504, rgba(20, 22, 26, 0.04));
+  border-radius: 999px;
 
-  & img {
-    width: 100%;
-    aspect-ratio: 1 / 1; /* defining the aspect ratio of the image */
-    object-fit: cover; /* making sure the image isn't distorted */
-    border-radius: 0.75rem;
+  & .wrapper__icon {
+    font-size: 1.75rem;
+    color: var(--gray-950, #14161a);
+    background: var(--gray-200);
+    border-radius: 999px;
+    width: 2.75rem;
+    height: 2.75rem;
+
+    & i {
+      width: auto;
+    }
   }
 
-  & .card-title {
-    font-size: 0.875rem;
-    font-weight: 600;
-     ${k(2)}
+  & .wrapper__text {
+    color: var(--gray-950, #14161a);
+    text-align: center;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.5rem;
+  }
+
+  &.active {
+    background: var(--yellow-600, #d97706);
+
+    & .wrapper__icon {
+      color: var(--white, #fff);
+    }
+
+    & .wrapper__text {
+      color: var(--white, #fff);
+    }
   }
+`, T = p.div`
+  width: 7rem;
+  height: 3rem;
+  border-radius: 999px;
+  background: ${y("-90deg")};
+`, j = m(({}, r) => /* @__PURE__ */ i(T, {})), z = m(
+  ({ text: r, isActive: n, icon: t, onSelectCard: s = () => {
+  } }, f) => /* @__PURE__ */ l(C, { className: n ? "active" : "", onClick: s, children: [
+    /* @__PURE__ */ i($, { icon: t, className: "wrapper__icon" }),
+    /* @__PURE__ */ i("div", { className: "wrapper__text", children: r })
+  ] })
+), F = m(
+  ({ image: r, imageComponent: n, title: t, description: s, onSelectCard: f = () => {
+  } }, w) => {
+    const { theme: d } = k();
+    return /* @__PURE__ */ l(W, { theme: d, onClick: f, children: [
+      b(n) ? n : /* @__PURE__ */ i("img", { src: r, className: "wrapper__image" }),
+      /* @__PURE__ */ l("div", { className: "wrapper__content", children: [
+        t && /* @__PURE__ */ i("div", { className: "wrapper__title", children: t }),
+        s && /* @__PURE__ */ i("div", { className: "wrapper__description", children: s })
+      ] })
+    ] });
+  }
+), O = m(({}, r) => /* @__PURE__ */ i(I, {})), A = p.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+
+  & .wrapper__heading {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
 
-  &:hover {
-    & .card-title {
-      color: var(--primary-500, #F59E0B);
+    & .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;
     }
   }
 
-  & .skeleton-img {
-    background-color: ${h("-90deg")};
-    border-radius: 0.75rem;
-    border: 1px solid white;
+  & .wrapper__tags {
+    display: grid;
+    grid-template-columns: ${(r) => `repeat(${r == null ? void 0 : r.limitTags}, minmax(0, 1fr))`};
+    justify-content: center;
+    align-items: center;
+    gap: 0.75rem;
   }
 
-  & .skeleton-title {
-    background-color: ${h("-90deg")};
+  & .wrapper__cards {
+    display: grid;
+    grid-template-columns: ${(r) => `repeat(${r == null ? void 0 : r.limitCards}, minmax(0, 1fr))`};
+    justify-content: center;
+    align-items: center;
+    gap: 1.5rem;
     width: 100%;
-    height: 1.25rem;
   }
 
-  @media (max-width: ${f + "px"}) {
-    & img {
-      width: 8.875rem;
-      height: 8.875rem;
-      min-width: 8.875rem;
-      min-height: 8.875rem;
-      min-width: 8.875rem;
-      min-height: 8.875rem;
-      object-fit: cover;
+  @media (max-width: ${N + "px"}) {
+    & .wrapper__tags {
+      display: flex;
+      overflow-x: scroll;
+      justify-content: flex-start;
+      width: 100%;
+    }
+
+    & .wrapper__cards {
+      grid-template-columns: ${(r) => `repeat(${r == null ? void 0 : r.limitCardsForMobile}, minmax(0, 1fr))`};
+      gap: 1rem;
     }
   }
-`, u = g((a, c) => {
-  const {
-    uuid: l,
-    title: i,
-    image: o,
-    sellerUuid: p,
-    onSelectCard: t = () => {
+`, X = m(
+  ({
+    title: r,
+    subtitle: n,
+    tags: t = [],
+    limitTags: s = 7,
+    limitTagsForMobile: f = 7,
+    limitCards: w = 3,
+    limitCardsForMobile: d = 2,
+    cards: a = [],
+    onSelectTag: h = () => {
     },
-    imageComponent: d
-  } = a;
-  return /* @__PURE__ */ m(j, { className: "product-card", onClick: t, children: [
-    y(d) ? d : /* @__PURE__ */ r("img", { src: o }),
-    /* @__PURE__ */ r("div", { className: "card-title", children: i })
-  ] });
-}), P = g((a, c) => {
-  const {
-    icon: l,
-    items: i,
-    limit: o = 4,
-    bannerImage: p,
-    onSelectCard: t = () => {
-    },
-    title: d = "Season inspiration"
-  } = a, b = w();
-  return /* @__PURE__ */ m(v, { ref: c, children: [
-    /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ m("div", { className: "regular-title-text", children: [
-      N(l) && /* @__PURE__ */ r("i", { className: l }),
-      /* @__PURE__ */ r("span", { children: d })
-    ] }) }),
-    /* @__PURE__ */ r(S, { className: "products-banner", children: /* @__PURE__ */ r("img", { src: p }) }),
-    /* @__PURE__ */ r($, { limit: o, children: b === !0 ? i == null ? void 0 : i.map((e, n) => /* @__PURE__ */ r(
-      u,
-      {
-        title: e == null ? void 0 : e.title,
-        image: e == null ? void 0 : e.image,
-        sellerUuid: e == null ? void 0 : e.sellerUuid,
-        uuid: e == null ? void 0 : e.uuid,
-        onSelectCard: () => t == null ? void 0 : t(e == null ? void 0 : e.uuid)
-      },
-      n
-    )) : i == null ? void 0 : i.slice(0, o).map((e, n) => /* @__PURE__ */ r(
-      u,
+    onSelectCard: _ = () => {
+    }
+  }, M) => {
+    var x, u;
+    const c = (e) => {
+      h == null || h(e == null ? void 0 : e.uuid);
+    }, g = (e) => {
+      _ == null || _(e == null ? void 0 : e.uuid);
+    };
+    return /* @__PURE__ */ l(
+      A,
       {
-        title: e == null ? void 0 : e.title,
-        image: e == null ? void 0 : e.image,
-        sellerUuid: e == null ? void 0 : e.sellerUuid,
-        uuid: e == null ? void 0 : e.uuid,
-        onSelectCard: () => t == null ? void 0 : t(e == null ? void 0 : e.uuid)
-      },
-      n
-    )) })
-  ] });
-});
+        limitTags: s,
+        limitTagsForMobile: f,
+        limitCards: w,
+        limitCardsForMobile: d,
+        children: [
+          /* @__PURE__ */ l("div", { className: "wrapper__heading", children: [
+            r && /* @__PURE__ */ i("div", { className: "wrapper__title", children: r }),
+            n && /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: n })
+          ] }),
+          /* @__PURE__ */ i("div", { className: "wrapper__tags", children: t && (t == null ? void 0 : t.length) > 0 ? t == null ? void 0 : t.map((e, o) => /* @__PURE__ */ i(
+            z,
+            {
+              icon: e == null ? void 0 : e.icon,
+              text: e == null ? void 0 : e.text,
+              onSelectCard: () => c == null ? void 0 : c(e)
+            },
+            `field-of-interests-with-tags-card-tag__${o + 1}`
+          )) : (x = Array.from("123")) == null ? void 0 : x.map((e, o) => /* @__PURE__ */ i(
+            j,
+            {},
+            `field-of-interests-with-tags-card-tag-skeleton__${o + 1}`
+          )) }),
+          /* @__PURE__ */ i("div", { className: "wrapper__cards", children: a && (a == null ? void 0 : a.length) > 0 ? a == null ? void 0 : a.map((e, o) => /* @__PURE__ */ i(
+            F,
+            {
+              image: e == null ? void 0 : e.image,
+              imageComponent: e == null ? void 0 : e.imageComponent,
+              title: e == null ? void 0 : e.title,
+              description: e == null ? void 0 : e.description,
+              onSelectCard: () => g == null ? void 0 : g(e == null ? void 0 : e.uuid)
+            },
+            `field-of-interests-with-tags-card__${o + 1}`
+          )) : (u = Array.from("123")) == null ? void 0 : u.map((e, o) => /* @__PURE__ */ i(
+            O,
+            {},
+            `field-of-interests-with-tags-card-skeleton__${o + 1}`
+          )) })
+        ]
+      }
+    );
+  }
+);
 export {
-  P as default
+  X as default
 };