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

React component library

import { jsxs as i, jsx as o } from "react/jsx-runtime";
import { forwardRef as x, Fragment as w } from "react";
import { s as d } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as t } from "./breakpoints-BubDitvo.js";
import { S as N } from "./index-CCwfh-7A.js";
const C = d.div`
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  gap: 1.25rem;
  background-color: var(--white, #fff);
  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);
  border-radius: 0.75rem;
  & .wrapper-title {
    font-weight: 600;
    font-size: 1rem;
  }

  @media ${t("S")} {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }
`, $ = d.div`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;

  @media ${t("M")} {
    grid-template-columns: repeat(2, 1fr);
  }

  @media ${t("S")} {
    gap: 0.5rem;
  }

  @media ${t("XS")} {
    grid-template-columns: 1fr;
  }
`, k = d.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);
  }
`, M = x((p, c) => {
  const {
    title: m,
    items: l,
    options: a,
    selectedOption: g = [],
    onSelectRegion: f = () => {
    },
    onSelectCity: u = () => {
    },
    onSelectOption: h = () => {
    },
    onSelectAll: v = () => {
    },
    productsToolbarName: S = "All"
  } = p;
  return /* @__PURE__ */ i(C, { ref: c, className: "lp-section lp-location-search-section", children: [
    /* @__PURE__ */ o("div", { className: "wrapper-title", children: m }),
    (a == null ? void 0 : a.length) > 0 && /* @__PURE__ */ o(
      N,
      {
        items: a,
        selectedIds: g,
        onSelect: (e, n) => {
          h(e, n);
        },
        onSelectAll: v,
        labelKey: "name",
        valueKey: "code",
        noMargin: !0,
        productsToolbarName: S
      }
    ),
    /* @__PURE__ */ o($, { children: l == null ? void 0 : l.map((e, n) => {
      var s;
      return /* @__PURE__ */ i(k, { children: [
        /* @__PURE__ */ o("div", { className: "region", onClick: () => f(e), children: e == null ? void 0 : e.name }),
        /* @__PURE__ */ o("div", { className: "group-items", children: (s = e == null ? void 0 : e.cities) == null ? void 0 : s.map((r, b) => /* @__PURE__ */ o(w, { children: /* @__PURE__ */ i("div", { className: "city", onClick: () => u(r), children: [
          /* @__PURE__ */ o("span", { children: r == null ? void 0 : r.name }),
          /* @__PURE__ */ i("span", { className: "count-txt", children: [
            "(",
            r == null ? void 0 : r.count,
            ")"
          ] })
        ] }) }, n + b)) })
      ] }, n);
    }) })
  ] });
});
export {
  M as default
};