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

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

import { Typography as d } from "./index19.es.js";
import e, { useState as y, useRef as m } from "react";
import "./index35.es.js";
import { useToast as h } from "./index86.es.js";
import { Spinner as N } from "./index63.es.js";
import { Video as x, X as k } from "lucide-react";
import { useFormValues as w } from "./index138.es.js";
const z = ({
  id: u,
  onChange: r,
  value: l,
  accept: p = "video/*",
  error: i
}) => {
  const { onAssetUpload: c } = w(), { toast: o } = h(), [t, s] = y(!1), a = m(null), f = m(null), g = (v) => {
    const n = v.target.files?.[0];
    !n || t || c && (s(!0), c(n).then((b) => {
      r(b), o({
        title: "Alert!",
        description: "Video uploaded successfully.",
        icon: "success"
      });
    }).catch(() => {
      r(void 0), o({
        title: "Alert!",
        description: "Error uploading video",
        icon: "warning"
      });
    }).finally(() => {
      s(!1), a.current && (a.current.value = "");
    }));
  }, E = () => {
    t || a.current?.click();
  };
  return /* @__PURE__ */ e.createElement("div", { className: "relative" }, t && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70" }, /* @__PURE__ */ e.createElement(N, { 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(x, { className: "w-6 h-6 text-gray-500" })), /* @__PURE__ */ e.createElement(d, { variant: "body1", className: "text-gray-600" }, t ? "Uploading..." : l ? "Replace Video" : "Attach Video"))), /* @__PURE__ */ e.createElement(
    "input",
    {
      ref: a,
      id: `${u}-gallery`,
      type: "file",
      accept: p,
      disabled: t,
      onChange: g,
      className: "hidden"
    }
  ), i && /* @__PURE__ */ e.createElement(d, { variant: "body1", className: "mt-1 text-danger-1" }, i)), l && /* @__PURE__ */ e.createElement("div", { className: "grid grid-cols-2 gap-4 mt-4 sm:grid-cols-2 md:grid-cols-2" }, /* @__PURE__ */ e.createElement("div", { className: "relative flex  rounded" }, /* @__PURE__ */ e.createElement(
    "video",
    {
      ref: f,
      src: l.public_url,
      className: "object-cover h-32 rounded",
      controls: !0,
      controlsList: "nodownload",
      preload: "metadata"
    },
    /* @__PURE__ */ e.createElement(
      "track",
      {
        kind: "captions",
        label: "English captions",
        srcLang: "en",
        src: "",
        default: !0
      }
    )
  ), /* @__PURE__ */ e.createElement(
    "button",
    {
      onClick: () => {
        t || r(void 0);
      },
      className: "absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100"
    },
    /* @__PURE__ */ e.createElement(k, { size: 16, className: "stroke-danger" })
  ))));
};
export {
  z as SingleVideoPicker
};
//# sourceMappingURL=index173.es.js.map