@lanaco/lnc-react-ui/dist/CategorySimpleCard-BE6F0PFT.js

React component library

import { jsxs as p, jsx as r } from "react/jsx-runtime";
import { forwardRef as g } from "react";
import { s as l } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { n as a } from "./utils-BUdHa0nB.js";
import { d as f } from "./breakpoints-BubDitvo.js";
const x = l.a`
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-950, #14161a);
  min-height: 12.25rem;
  max-height: 12.25rem;
  border-radius: 0.75rem;
  border: 1px solid var(--gray-95008, rgba(20, 22, 26, 0.08));
  background: var(--white, #fff);
  cursor: pointer;

  transition: var(--transition);

  /* drop-shadow-sm */
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  overflow: hidden;

  & .card-content {
    padding: 0.75rem;
    ${a(2)}
  }

  & .card-content-2 {
    ${a(2)}
  }

  & img {
    width: 100%;
    object-fit: cover;
    min-height: 8.25rem;
    max-height: 8.25rem;
  }

  @media ${f("S")} {
    min-width: 8.75rem;
    max-width: 8.75rem;

    & .img,
    .skeleton-img {
      min-height: 5.375rem;
      max-height: 5.375rem;
    }
  }
`, y = g((n, m) => {
  const { image: d, name: s, urlPrefix: e, urlSufix: o, code: t, uuid: c, onSelectCard: h = () => {
  }, LinkComponent: i } = n;
  return /* @__PURE__ */ p(
    x,
    {
      ref: m,
      className: "simple-category-card",
      onClick: () => h(c),
      as: i || "a",
      ...i ? { to: `${e}${t}${o}` } : { href: `${e}${t}${o}` },
      children: [
        /* @__PURE__ */ r("img", { src: d }),
        /* @__PURE__ */ r("div", { className: "card-content", children: /* @__PURE__ */ r("div", { className: "card-content-2", children: s }) })
      ]
    }
  );
});
export {
  y as C
};