geoiq-frontend-ui-kit
Version:
This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.
102 lines (101 loc) • 4.57 kB
JavaScript
import e, { useRef as m, useState as N, useEffect as b } from "react";
import { AccordionDemo as y } from "./index.es4.js";
import { Typography as r } from "./index.es19.js";
import { SearchIcon as w, ExternalLink as _ } from "lucide-react";
import { Button as S } from "./index.es9.js";
import { Input as k } from "./index.es11.js";
import "clsx";
import "tailwind-merge";
import "./index.es56.js";
import "./index.es86.js";
import "./index.es29.js";
import "./index.es35.js";
import { Spinner as z } from "./index.es60.js";
const G = ({
properties: n = [],
title: s = "Properties added",
property_count: i,
onRedirect: o,
onReachBottom: d,
onSearchChange: g,
loading: f = !1
}) => {
const c = m(null), p = m(!1), [u, h] = N(""), E = (t) => {
h(t.target.value), g?.(t.target.value), c.current && (c.current.scrollTop = 0);
};
b(() => {
p.current = !1;
}, [n]);
const x = (t) => {
const { scrollTop: l, scrollHeight: a, clientHeight: v } = t.currentTarget;
l + v >= a - 5 && d?.();
};
return /* @__PURE__ */ e.createElement(
y,
{
trigger: /* @__PURE__ */ e.createElement(r, { variant: "body1", className: "text-light-2" }, s, " (", i, ")"),
content: /* @__PURE__ */ e.createElement(
"div",
{
ref: c,
onScroll: x,
className: "max-h-[400px] overflow-y-auto"
},
/* @__PURE__ */ e.createElement("div", { className: "w-full sticky top-0 bg-light-1 z-50 pb-2" }, /* @__PURE__ */ e.createElement(
k,
{
placeholder: "Search properties",
prefix: /* @__PURE__ */ e.createElement(w, { className: "stroke-light-2", size: 20 }),
value: u,
onChange: E
}
)),
n.length === 0 ? /* @__PURE__ */ e.createElement("div", { className: "flex justify-center items-center h-20 text-light-3" }, "No property found") : /* @__PURE__ */ e.createElement(e.Fragment, null, n.map((t) => /* @__PURE__ */ e.createElement(
"div",
{
key: t.id,
className: "rounded-[12px] border border-neutral-1 bg-light-2 p-3 mb-3 flex flex-col gap-2 "
},
/* @__PURE__ */ e.createElement("div", { className: "w-full flex justify-between items-start" }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("div", { className: "flex items-center gap-2 mb-3 p-0" }, /* @__PURE__ */ e.createElement(r, { variant: "body4", className: "text-light-2 " }, t.name), /* @__PURE__ */ e.createElement(
S,
{
variant: "secondary",
size: "sm",
className: "w-fit ml-auto",
onClick: () => o?.(t)
},
/* @__PURE__ */ e.createElement(
_,
{
size: 16,
className: "text-light-1 cursor-pointer bg-light-1"
}
)
)), /* @__PURE__ */ e.createElement("div", { className: "flex w-[372px] rounded-lg p-3 bg-light-1" }, t.property_details && t.property_details.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "flex w-full rounded-lg p-0 bg-light-1" }, t.property_details && t.property_details.length > 0 && t.property_details.map(
(l, a) => /* @__PURE__ */ e.createElement(e.Fragment, { key: a }, /* @__PURE__ */ e.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ e.createElement("div", { className: "truncate font-medium" }, /* @__PURE__ */ e.createElement(
r,
{
variant: "body6",
className: "text-light-4"
},
l.name
), " "), /* @__PURE__ */ e.createElement("div", { className: "truncate text-light-3" }, /* @__PURE__ */ e.createElement(
r,
{
variant: "body6",
className: "text-light-2"
},
l.value
))), t.property_details && a !== t.property_details.length - 1 && /* @__PURE__ */ e.createElement("div", { className: "h-auto w-px border-l mx-3 border-neutral-2" }))
)))))
)), f && /* @__PURE__ */ e.createElement("div", { className: "left-0 right-0 bottom-0 flex justify-center items-center py-4" }, /* @__PURE__ */ e.createElement(z, null)))
),
triggerProps: { className: "cursor-pointer my-2" },
contentProps: { className: "max-h-[400px] overflow-y-auto" }
}
);
};
export {
G as PropertiesAddedSection
};
//# sourceMappingURL=index.es123.js.map