geoiq-frontend-ui-kit/dist/index172.es.js

This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.

import { Typography as u } from "./index19.es.js";
import e, { useState as v, useRef as N } from "react";
import "./index35.es.js";
import { useToast as h } from "./index86.es.js";
import { Spinner as x } from "./index63.es.js";
import { Upload as _, X as w, Pen as k } from "lucide-react";
import { useFormValues as I } from "./index138.es.js";
const j = ({
  id: g,
  onChange: l,
  value: t,
  accept: f = "image/*",
  error: c
}) => {
  const { onAssetUpload: s, onToggleImageEditor: o } = I(), { toast: n } = h(), [r, m] = v(!1), i = N(null), b = (a) => {
    const d = a.target.files?.[0];
    !d || r || s && (m(!0), s(d).then((p) => {
      l({ ...p, original_private_url: p.private_url }), n({
        title: "Alert!",
        description: "File uploaded successfully.",
        icon: "success"
      });
    }).catch(() => {
      l(void 0), n({
        title: "Alert!",
        description: "Error uploading file",
        icon: "warning"
      });
    }).finally(() => {
      m(!1), i.current && (i.current.value = "");
    }));
  }, y = (a) => {
    l({
      ...a,
      original_private_url: t?.original_private_url ?? t?.private_url
    });
  }, E = () => {
    r || i.current?.click();
  };
  return /* @__PURE__ */ e.createElement("div", { className: "relative" }, r && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70" }, /* @__PURE__ */ e.createElement(x, { className: "w-8 h-8 text-primary-1" })), /* @__PURE__ */ e.createElement("div", { className: "relative p-8 border-2 border-dashed rounded-lg border-primary-1 bg-primary-1" }, /* @__PURE__ */ e.createElement("button", { className: "w-full", onClick: E }, /* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-center gap-3 text-center" }, /* @__PURE__ */ e.createElement("div", { className: "bg-gray-100 rounded-full" }, /* @__PURE__ */ e.createElement(_, { className: "w-6 h-6 text-gray-500" })), /* @__PURE__ */ e.createElement(u, { variant: "body1", className: "text-gray-600" }, r ? "Uploading..." : t ? "Replace Image" : "Attach Image"))), /* @__PURE__ */ e.createElement(
    "input",
    {
      ref: i,
      id: `${g}-gallery`,
      type: "file",
      accept: f,
      disabled: r,
      onChange: b,
      className: "hidden"
    }
  ), c && /* @__PURE__ */ e.createElement(u, { variant: "body1", className: "mt-1 text-danger-1" }, c)), t && /* @__PURE__ */ e.createElement("div", { className: "grid grid-cols-2 gap-4 mt-4 sm:grid-cols-3 md:grid-cols-4" }, /* @__PURE__ */ e.createElement("div", { className: "relative flex rounded" }, /* @__PURE__ */ e.createElement(
    "img",
    {
      src: t.public_url,
      alt: "Preview",
      className: "object-cover w-full h-24 rounded"
    }
  ), /* @__PURE__ */ e.createElement(
    "button",
    {
      type: "button",
      onClick: () => {
        r || l(void 0);
      },
      className: "absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100"
    },
    /* @__PURE__ */ e.createElement(w, { size: 16, className: "stroke-danger" })
  ), o && /* @__PURE__ */ e.createElement(
    "button",
    {
      type: "button",
      onClick: (a) => {
        a.currentTarget.blur(), o({
          imageUrl: t.public_url,
          index: -1,
          onReplaceImage: y
        });
      },
      className: "absolute p-1 text-white bg-white rounded-full left-2 top-2 opacity-70 hover:opacity-100"
    },
    /* @__PURE__ */ e.createElement(k, { size: 16, className: "stroke-danger" })
  ))));
};
export {
  j as SingleImagePicker
};
//# sourceMappingURL=index172.es.js.map