108 lines
3.8 KiB
JavaScript
108 lines
3.8 KiB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
|
|
import { B as Button } from "./index-CY6fYws-.js";
|
|
import { I as Input } from "./input-DfkIsvXR.js";
|
|
import { L as Label } from "./label-DrpjkvJN.js";
|
|
import { A as AppLayout } from "./app-layout-BFyUFda2.js";
|
|
import { useForm, Head } from "@inertiajs/react";
|
|
import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation";
|
|
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
|
|
/* empty css */
|
|
import { useState, useEffect } from "react";
|
|
import { FilePond, registerPlugin } from "react-filepond";
|
|
import { toast } from "sonner";
|
|
import "@radix-ui/react-slot";
|
|
import "class-variance-authority";
|
|
import "clsx";
|
|
import "tailwind-merge";
|
|
import "@radix-ui/react-label";
|
|
import "lucide-react";
|
|
import "./sheet-Bq2cyJmx.js";
|
|
import "@radix-ui/react-dialog";
|
|
import "@radix-ui/react-tooltip";
|
|
import "@radix-ui/react-dropdown-menu";
|
|
import "@radix-ui/react-avatar";
|
|
import "./app-logo-icon-kpljnLMz.js";
|
|
registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);
|
|
function CarouselAdd() {
|
|
const [file, setFile] = useState(null);
|
|
const { data, setData, post, processing, errors, wasSuccessful } = useForm({
|
|
alt: "",
|
|
image_url: null
|
|
});
|
|
useEffect(() => {
|
|
if (file) {
|
|
setData("image_url", file.file);
|
|
}
|
|
}, [file, setData]);
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
post("/carousel", {
|
|
forceFormData: true
|
|
});
|
|
if (wasSuccessful) {
|
|
toast.success("Slider image successfully uploaded");
|
|
}
|
|
};
|
|
return /* @__PURE__ */ jsxs(AppLayout, { children: [
|
|
/* @__PURE__ */ jsx(Head, { title: "Add Carousel" }),
|
|
/* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-8 px-8 py-8", children: [
|
|
/* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold tracking-tight", children: "Add Slider Image" }),
|
|
/* @__PURE__ */ jsxs(
|
|
"form",
|
|
{
|
|
onSubmit: handleSubmit,
|
|
method: "POST",
|
|
encType: "multipart/formdata",
|
|
children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
|
|
/* @__PURE__ */ jsx(Label, { htmlFor: "title", children: "Title" }),
|
|
/* @__PURE__ */ jsx(
|
|
Input,
|
|
{
|
|
type: "text",
|
|
id: "title",
|
|
value: data.alt,
|
|
onChange: (e) => setData("alt", e.target.value),
|
|
className: "rounded border p-2"
|
|
}
|
|
),
|
|
errors.alt && /* @__PURE__ */ jsx("span", { className: "text-red-600", children: errors.alt })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
|
|
/* @__PURE__ */ jsx(Label, { children: "Image" }),
|
|
/* @__PURE__ */ jsx(
|
|
FilePond,
|
|
{
|
|
files: file ? [file] : [],
|
|
onupdatefiles: (fileItems) => {
|
|
setFile(fileItems[0] || null);
|
|
},
|
|
allowMultiple: false,
|
|
maxFiles: 1,
|
|
name: "image_url",
|
|
instantUpload: false,
|
|
storeAsFile: true,
|
|
labelIdle: 'Drag & Drop your image or <span class="filepond--label-action">Browse</span>'
|
|
}
|
|
),
|
|
errors.image_url && /* @__PURE__ */ jsx("span", { className: "text-red-600", children: errors.image_url })
|
|
] }),
|
|
/* @__PURE__ */ jsx(
|
|
Button,
|
|
{
|
|
type: "submit",
|
|
disabled: processing,
|
|
className: "cursor-pointer",
|
|
children: processing ? "Uploading..." : "Submit"
|
|
}
|
|
)
|
|
]
|
|
}
|
|
)
|
|
] })
|
|
] });
|
|
}
|
|
export {
|
|
CarouselAdd as default
|
|
};
|