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

React component library

import { jsxs as a, jsx as n } from "react/jsx-runtime";
import { forwardRef as u, Fragment as v } from "react";
import { n as t } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as d } from "./consts-C1uHV4xc.js";
import { S as w } from "./index-5cttM4t7.js";
const S = t.div`
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  gap: 1.25rem;

  & .wrapper-title {
    font-weight: 600;
    font-size: 1rem;
  }

  @media (max-width: ${d + "px"}) {
    padding: 0;
  }
`, N = t.div`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;

  @media (max-width: ${d + "px"}) {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
`, C = t.div`
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-weight: 500;
  font-size: 0.875rem;

  & .group-items {
    padding: 0 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 400;

    & .count-txt {
      color: var(--gray-600, #676e79);
    }
  }

  & .region,
  .city {
    cursor: pointer;
    transition: var(--transition);

    &:hover {
      color: var(--primary-500, #f59e0b);
    }
  }
`, k = u((p, s) => {
  const {
    title: c,
    items: i,
    options: o,
    onSelectRegion: f = () => {
    },
    onSelectCity: g = () => {
    }
  } = p;
  return /* @__PURE__ */ a(S, { ref: s, children: [
    /* @__PURE__ */ n("div", { className: "wrapper-title", children: c }),
    (o == null ? void 0 : o.length) > 0 && /* @__PURE__ */ n(
      w,
      {
        items: o,
        onRemove: (e) => {
        },
        onSelect: (e) => {
        },
        labelKey: "name",
        valueKey: "code",
        noMargin: !0
      }
    ),
    /* @__PURE__ */ n(N, { children: i == null ? void 0 : i.map((e, l) => {
      var m;
      return /* @__PURE__ */ a(C, { children: [
        /* @__PURE__ */ n("div", { className: "region", onClick: () => f(e == null ? void 0 : e.code), children: e == null ? void 0 : e.name }),
        /* @__PURE__ */ n("div", { className: "group-items", children: (m = e == null ? void 0 : e.cities) == null ? void 0 : m.map((r, h) => /* @__PURE__ */ n(v, { children: /* @__PURE__ */ a(
          "div",
          {
            className: "city",
            onClick: () => g(r == null ? void 0 : r.code),
            children: [
              /* @__PURE__ */ n("span", { children: r == null ? void 0 : r.name }),
              /* @__PURE__ */ a("span", { className: "count-txt", children: [
                "(",
                r == null ? void 0 : r.count,
                ")"
              ] })
            ]
          }
        ) }, l + h)) })
      ] }, l);
    }) })
  ] });
});
export {
  k as default
};