@lanaco/lnc-react-ui/dist/CategoryCardsSection.js

React component library

import { jsxs as l, jsx as o } from "react/jsx-runtime";
import { forwardRef as f, useRef as _, memo as h, useMemo as u } from "react";
import { s as c } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d } from "./breakpoints-BubDitvo.js";
const w = c.div`
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  text-align: center;

  & .card__name {
    font-weight: 500;
    font-size: 1rem;
    leading-trim: none;
    line-height: 1.5rem;
    letter-spacing: 0;
    color: var(--neutral-600, #0f2a46);
    white-space: nowrap;

    &.below {
      display: none;
    }
  }

  @media ${d("S")} {
    & .card__name {
      &.below {
        display: block;
      }
    }
  }
`, y = c.a`
  text-decoration: none;
  color: var(--gray-950, #14161a);
  display: block;
  border-radius: 0.75rem;
  border: 1px solid var(--neutral-9508, rgba(20, 22, 26, 0.08));
  background: var(--gray-50, #f5f7fa);
  aspect-ratio: 2 / 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease;

  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    height: 0.375rem;
    width: 100%;
    z-index: 2;
    border-radius: 1rem 1rem 0 0;
    background: ${(r) => (r == null ? void 0 : r.borderColor) || "var(--primary-500, #f59e0b)"};
    transition: left 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  }

  &:hover {
    &::before {
      left: 0;
    }

    & .card__image {
      transform: scale(1.1);
    }
  }

  & .card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
  }

  & .card__name-badge {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    background: var(--white, #fff);
    border-radius: 0.5rem;
    padding: 0.5rem;

    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  }

  @media ${d("S")} {
    aspect-ratio: 3 / 2;

    & .card__name-badge {
      display: none;
    }
  }
`, v = f(
  ({
    name: r,
    imageUrl: a,
    buttonLink: i,
    borderColor: p,
    onSelectCard: s = () => {
    },
    LinkComponent: t
  }, m) => {
    const e = t || "a", n = _();
    return /* @__PURE__ */ l(w, { children: [
      /* @__PURE__ */ l(
        y,
        {
          ref: n,
          borderColor: p,
          onClick: (g) => s(g, n),
          as: e,
          ...t ? { to: `/${i}` } : { href: `/${i}` },
          children: [
            a && /* @__PURE__ */ o(
              "img",
              {
                src: a,
                alt: r,
                className: "card__image",
                loading: "lazy"
              }
            ),
            r && /* @__PURE__ */ o("div", { className: "card__name-badge", children: /* @__PURE__ */ o("span", { className: "card__name", children: r }) })
          ]
        }
      ),
      r && /* @__PURE__ */ o("div", { className: "card__name below", children: r })
    ] });
  }
), x = c.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;

  & .wrapper__title {
    color: var(--gray-900, #0c1520);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2rem;
    letter-spacing: -0.47px;
  }

  & .wrapper__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
  }

  @media ${d("S")} {
    gap: 1rem;

    & .wrapper__title {
      font-size: 1.375rem;
    }

    & .wrapper__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.75rem;
    }
  }

  @media ${d("XS")} {
    & .wrapper__title {
      font-size: 1.375rem;
      font-style: semibold;
    }

    & .wrapper__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
`, z = h(v), j = f(
  ({ title: r, items: a, onSelectCard: i = () => {
  }, componentName: p, LinkComponent: s }, t) => {
    const m = u(() => a == null ? void 0 : a.map((e, n) => /* @__PURE__ */ o(
      z,
      {
        name: e == null ? void 0 : e.name,
        imageUrl: e == null ? void 0 : e.imageUrl,
        borderColor: e == null ? void 0 : e.borderColor,
        buttonLink: e == null ? void 0 : e.buttonLink,
        onSelectCard: (g, b) => i == null ? void 0 : i(e, b),
        LinkComponent: s
      },
      `category-card__${n + 1}`
    )), [a]);
    return /* @__PURE__ */ l(x, { ref: t, className: "lp-section lp-category-cards-section", children: [
      r && /* @__PURE__ */ o("div", { className: "wrapper__title", children: r }),
      /* @__PURE__ */ o("div", { className: "wrapper__grid", children: m })
    ] });
  }
);
export {
  j as default
};