geoiq-frontend-ui-kit
Version:
This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.
80 lines (79 loc) • 3.24 kB
JavaScript
import { Typography as d } from "./index.es17.js";
import { Spinner as y } from "./index.es56.js";
import { Video as h, X as N } from "lucide-react";
import e, { useState as x, useRef as m } from "react";
import { useFormValues as k } from "./index.es146.js";
import { useToast as w } from "./index.es73.js";
const j = ({
id: u,
onChange: r,
value: l,
accept: p = "video/*",
error: i
}) => {
const { onAssetUpload: c } = k(), { toast: s } = w(), [t, o] = x(!1), a = m(null), f = m(null), g = (v) => {
const n = v.target.files?.[0];
!n || t || c && (o(!0), c(n).then((b) => {
r(b), s({
title: "Alert!",
description: "Video uploaded successfully.",
icon: "success"
});
}).catch(() => {
r(void 0), s({
title: "Alert!",
description: "Error uploading video",
icon: "warning"
});
}).finally(() => {
o(!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(y, { 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(h, { 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(N, { size: 16, className: "stroke-danger" })
))));
};
export {
j as SingleVideoPicker
};
//# sourceMappingURL=index.es152.js.map