From 8a1d5dc9dce51305cb7291042ad964d1ffb494f2 Mon Sep 17 00:00:00 2001 From: pawan-dot <71133473+pawan-dot@users.noreply.github.com> Date: Sat, 15 Jun 2024 08:53:41 +0530 Subject: [PATCH] logo and home --- src/_nav.js | 14 +- src/views/Content/editRefundPolicy.js | 2 +- src/views/Home/editPanel1.js | 715 +++++++++++++------------ src/views/Home/editPanel2.js | 6 +- src/views/Home/editPanel3.js | 6 +- src/views/Home/editPanel4.js | 727 +++++++++++++------------- 6 files changed, 727 insertions(+), 743 deletions(-) diff --git a/src/_nav.js b/src/_nav.js index 21c9b4b..6d3bbc5 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -307,13 +307,13 @@ const _nav = [ to: "/copyright/message", group: "Settings", }, - // { - // component: CNavItem, - // name: "Home", - // icon: , - // to: "/home", - // group: "Website Settings", - // }, + { + component: CNavItem, + name: "Home", + icon: , + to: "/home", + group: "Settings", + }, ], }, // { diff --git a/src/views/Content/editRefundPolicy.js b/src/views/Content/editRefundPolicy.js index 3873f95..28f5d39 100644 --- a/src/views/Content/editRefundPolicy.js +++ b/src/views/Content/editRefundPolicy.js @@ -45,7 +45,7 @@ export default function editRefundPolicy() { }; const addTermsandConditions = async () => { - const response = await axios.patch( + const response = await axios.post( "/api/content/refund-policy", { content }, { diff --git a/src/views/Home/editPanel1.js b/src/views/Home/editPanel1.js index 449f630..71518d2 100644 --- a/src/views/Home/editPanel1.js +++ b/src/views/Home/editPanel1.js @@ -6,398 +6,389 @@ import "react-quill/dist/quill.snow.css"; import axios from "axios"; import { isAutheticated } from "src/auth"; const TOOLBAR_OPTIONS = [ - [{ header: [1, 2, 3, 4, 5, 6, false] }], - [{ font: [] }], - [{ list: "ordered" }, { list: "bullet" }], - ["bold", "italic", "underline", "strike"], - [{ color: [] }, { background: [] }], - [{ align: [] }], - [{ script: "super" }, { script: "sub" }], - ["undo", "redo"], + [{ header: [1, 2, 3, 4, 5, 6, false] }], + [{ font: [] }], + [{ list: "ordered" }, { list: "bullet" }], + ["bold", "italic", "underline", "strike"], + [{ color: [] }, { background: [] }], + [{ align: [] }], + [{ script: "super" }, { script: "sub" }], + ["undo", "redo"], ]; import CloudUploadIcon from "@mui/icons-material/CloudUpload"; import DeleteSharpIcon from "@mui/icons-material/DeleteSharp"; -import { - Box, - TextField, - Checkbox, - FormControlLabel -} from "@mui/material"; +import { Box, TextField, Checkbox, FormControlLabel } from "@mui/material"; const EditPanel1 = () => { - const token = isAutheticated(); - const [loading, setLoading] = useState(false); - const [displayPanel, setDisplayPanel] = useState(false); - const [content, setContent] = useState(""); - const [olderContent, setOlderContent] = useState(""); - const [image, setimage] = useState(null); - const [title, setTitle] = useState(""); - const [error, setError] = useState(""); - const [newUpdatedImages, setNewUpdatedImages] = useState(null); - const [Img, setImg] = useState(true); - const [id, setId] = useState(null); + const token = isAutheticated(); + const [loading, setLoading] = useState(false); + const [displayPanel, setDisplayPanel] = useState(false); + const [content, setContent] = useState(""); + const [olderContent, setOlderContent] = useState(""); + const [image, setimage] = useState(null); + const [title, setTitle] = useState(""); + const [error, setError] = useState(""); + const [newUpdatedImages, setNewUpdatedImages] = useState(null); + const [Img, setImg] = useState(true); + const [id, setId] = useState(null); - const handleContentChange = (content, delta, source, editor) => { - setContent(editor.getHTML()); - }; - //get Blogdata - const getPanel = async () => { - try { - const res = await axios.get(`/api/panel/panel1/get`, { - headers: { - "Access-Control-Allow-Origin": "*", - Authorization: `Bearer ${token}`, - }, - }); - setTitle(res?.data?.panel1[0]?.title); - setimage(res?.data?.panel1[0]?.image); - setContent(res?.data?.panel1[0]?.content); - setOlderContent(res?.data?.panel1[0]?.content); - setDisplayPanel(res?.data?.panel1[0]?.displayPanel); - setId(res?.data?.panel1[0]?._id); - setImg(false); - } catch (err) { - swal({ - title: "Error", - text: "Unable to fetch the panel content", - icon: "error", - button: "Retry", - dangerMode: true, - }); - } - }; + const handleContentChange = (content, delta, source, editor) => { + setContent(editor.getHTML()); + }; + //get Blogdata + const getPanel = async () => { + try { + const res = await axios.get(`/api/panel/panel1/get`, { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + }); + setTitle(res?.data?.panel1[0]?.title); + setimage(res?.data?.panel1[0]?.image); + setContent(res?.data?.panel1[0]?.content); + setOlderContent(res?.data?.panel1[0]?.content); + setDisplayPanel(res?.data?.panel1[0]?.displayPanel); + setId(res?.data?.panel1[0]?._id); + setImg(false); + } catch (err) { + swal({ + title: "Error", + text: "Unable to fetch the panel content", + icon: "error", + button: "Retry", + dangerMode: true, + }); + } + }; - useEffect(() => { - getPanel(); - }, []); + useEffect(() => { + getPanel(); + }, []); - const handleFileChange = (e) => { - const files = e.target.files; - // Reset error state - setError(""); + const handleFileChange = (e) => { + const files = e.target.files; + // Reset error state + setError(""); - // Check if more than one image is selected - if (files.length > 1 || Img === false || newUpdatedImages !== null) { - setError("You can only upload one image."); - return; - } + // Check if more than one image is selected + if (files.length > 1 || Img === false || newUpdatedImages !== null) { + setError("You can only upload one image."); + return; + } - // Check file types and append to selectedFiles - const allowedTypes = ["image/jpeg", "image/png", "image/jpg"]; - const file = files[0]; // Only one file is selected, so we get the first one + // Check file types and append to selectedFiles + const allowedTypes = ["image/jpeg", "image/png", "image/jpg"]; + const file = files[0]; // Only one file is selected, so we get the first one - if (allowedTypes.includes(file.type)) { - setNewUpdatedImages(file); - setimage(file); + if (allowedTypes.includes(file.type)) { + setNewUpdatedImages(file); + setimage(file); + } else { + setError("Please upload only PNG, JPEG, or JPG files."); + } + }; - } else { - setError("Please upload only PNG, JPEG, or JPG files."); - } - }; + const handelDelete = async (public_id) => { + console.log(public_id); + const ary = public_id?.split("/"); + setNewUpdatedImages(null); - const handelDelete = async (public_id) => { - const ary = public_id.split("/"); - setNewUpdatedImages(null); + const res = await axios.delete( + `/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`, + { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + } + ); + if (res) { + setimage(null); + setImg(true); + } + }; - const res = await axios.delete( - `/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`, - { - headers: { - "Access-Control-Allow-Origin": "*", - Authorization: `Bearer ${token}`, - }, - } - ); - if (res) { - setimage(null); - setImg(true); - } - }; - + const addContent = async () => { + const formData = new FormData(); + formData.append("title", title); + formData.append("content", content); + formData.append("displayPanel", displayPanel); + formData.append("image", image); - const addContent = async () => { + const response = await axios.post("/api/panel/panel1/add", formData, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + if (response.status == 201) { + swal({ + title: "Congratulations!!", + text: "Panel 1 added successfully!", + icon: "success", + button: "OK", + }); + } + }; - const formData = new FormData(); - formData.append("title", title); - formData.append("content", content); - formData.append("displayPanel", displayPanel); - formData.append("image", image); - + const updateContent = () => { + if (title === "" || content === "") { + swal({ + title: "Warning", + text: "Fill all mandatory fields", + icon: "error", + button: "Close", + dangerMode: true, + }); + return; + } + setLoading(true); - const response = await axios.post( - "/api/panel/panel1/add", - formData, - { - headers: { - Authorization: `Bearer ${token}`, - }, - } - ); - if (response.status == 201) { - swal({ - title: "Congratulations!!", - text: "Panel 1 added successfully!", - icon: "success", - button: "OK", - }); - } - }; + const formData = new FormData(); + formData.append("title", title); + formData.append("content", content); + formData.append("displayPanel", displayPanel); - const updateContent = () => { - if (title === "" || content === "") { - swal({ - title: "Warning", - text: "Fill all mandatory fields", - icon: "error", - button: "Close", - dangerMode: true, - }); - return; - } - setLoading(true); + if (newUpdatedImages !== null) { + formData.append("image", newUpdatedImages); + } + axios + .patch(`/api/panel/panel1/update/${id}`, formData, { + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "multipart/form-data", + "Access-Control-Allow-Origin": "*", + }, + }) + .then((res) => { + swal({ + title: "Updated", + text: " Updated successfully!", + icon: "success", + button: "ok", + }); + setLoading(false); + }) + .catch((err) => { + setLoading(false); - const formData = new FormData(); - formData.append("title", title); - formData.append("content", content); - formData.append("displayPanel", displayPanel); + const message = err.response?.data?.message + ? err.response?.data?.message + : "Something went wrong!"; + swal({ + title: "Warning", + text: message, + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + }; - if (newUpdatedImages !== null) { - formData.append("image", newUpdatedImages); - } + const handleSaveClick = async () => { + if (olderContent.length === 0) { + addContent(); + } else { + updateContent(); + } + // // Reload terms and conditions + // await getPrivacyPolicy(); + }; - axios - .patch(`/api/panel/panel1/update/${id}`, formData, { - headers: { - Authorization: `Bearer ${token}`, - "Content-Type": "multipart/form-data", - "Access-Control-Allow-Origin": "*", - }, - }) - .then((res) => { - swal({ - title: "Updated", - text: " Updated successfully!", - icon: "success", - button: "ok", - }); - setLoading(false); - }) - .catch((err) => { - setLoading(false); - - const message = err.response?.data?.message - ? err.response?.data?.message - : "Something went wrong!"; - swal({ - title: "Warning", - text: message, - icon: "error", - button: "Retry", - dangerMode: true, - }); - }); - }; - - const handleSaveClick = async () => { - if (olderContent.length === 0) { - addContent(); - } else { - updateContent(); - } - // // Reload terms and conditions - // await getPrivacyPolicy(); - }; - - const handleChange = (event) => { - setDisplayPanel(event.target.checked); - }; - return ( -
-
-
-
+
+
+
-
- Panel 1 -
-
-

-
- -
- - } - label="Display Panel" - /> - - - - - - -
-
-
+ > +
+ Panel 1
-
-
-
-
-
- - setTitle(e.target.value)} - /> -
-
- - - - - {error &&

{error}

} -
- - *You cannot upload more than 1 image - -
- - - { image !== null ? ( - - Panel Image - handelDelete(image?.public_id)} - fontSize="small" - sx={{ - color: "white", - position: "absolute", - cursor: "pointer", - padding: "0.2rem", - background: "black", - borderRadius: "50%", - }} - /> - - ) : null} - - -
-
-
-
-
-
-
- - -
-
-
+
+

+ +
+ + } + label="Display Panel" + /> + + + + +
+
- ); +
+
+
+
+
+
+ + setTitle(e.target.value)} + /> +
+
+ + + + + {error &&

{error}

} +
+ + *You cannot upload more than 1 image + +
+ + + {image !== null ? ( + + Panel Image + {console.log("image", image)} + + { image?.public_id&& handelDelete(image?.public_id)} + fontSize="small" + sx={{ + color: "white", + position: "absolute", + cursor: "pointer", + padding: "0.2rem", + background: "black", + borderRadius: "50%", + }} + />} + + ) : null} + +
+
+
+
+
+
+
+ + +
+
+
+
+
+ ); }; export default EditPanel1; diff --git a/src/views/Home/editPanel2.js b/src/views/Home/editPanel2.js index 1d5848e..7daf96f 100644 --- a/src/views/Home/editPanel2.js +++ b/src/views/Home/editPanel2.js @@ -101,7 +101,7 @@ const EditPanel2 = () => { }; const handelDelete = async (public_id) => { - const ary = public_id.split("/"); + const ary = public_id?.split("/"); setNewUpdatedImages(null); const res = await axios.delete( @@ -368,7 +368,7 @@ const EditPanel2 = () => { marginBottom: "1rem", }} /> - handelDelete(image?.public_id)} fontSize="small" sx={{ @@ -379,7 +379,7 @@ const EditPanel2 = () => { background: "black", borderRadius: "50%", }} - /> + />} )} diff --git a/src/views/Home/editPanel3.js b/src/views/Home/editPanel3.js index 3235e2e..b771b3c 100644 --- a/src/views/Home/editPanel3.js +++ b/src/views/Home/editPanel3.js @@ -101,7 +101,7 @@ const EditPanel3 = () => { }; const handelDelete = async (public_id) => { - const ary = public_id.split("/"); + const ary = public_id?.split("/"); setNewUpdatedImages(null); const res = await axios.delete( @@ -366,7 +366,7 @@ const EditPanel3 = () => { marginBottom: "1rem", }} /> - handelDelete(image?.public_id)} fontSize="small" sx={{ @@ -377,7 +377,7 @@ const EditPanel3 = () => { background: "black", borderRadius: "50%", }} - /> + />} )} diff --git a/src/views/Home/editPanel4.js b/src/views/Home/editPanel4.js index 3410c72..b74329a 100644 --- a/src/views/Home/editPanel4.js +++ b/src/views/Home/editPanel4.js @@ -6,404 +6,397 @@ import "react-quill/dist/quill.snow.css"; import axios from "axios"; import { isAutheticated } from "src/auth"; const TOOLBAR_OPTIONS = [ - [{ header: [1, 2, 3, 4, 5, 6, false] }], - [{ font: [] }], - [{ list: "ordered" }, { list: "bullet" }], - ["bold", "italic", "underline", "strike"], - [{ color: [] }, { background: [] }], - [{ align: [] }], - [{ script: "super" }, { script: "sub" }], - ["undo", "redo"], + [{ header: [1, 2, 3, 4, 5, 6, false] }], + [{ font: [] }], + [{ list: "ordered" }, { list: "bullet" }], + ["bold", "italic", "underline", "strike"], + [{ color: [] }, { background: [] }], + [{ align: [] }], + [{ script: "super" }, { script: "sub" }], + ["undo", "redo"], ]; import CloudUploadIcon from "@mui/icons-material/CloudUpload"; import DeleteSharpIcon from "@mui/icons-material/DeleteSharp"; -import { - Box, - TextField, - Checkbox, - FormControlLabel -} from "@mui/material"; +import { Box, TextField, Checkbox, FormControlLabel } from "@mui/material"; const Editpanel4 = () => { - const token = isAutheticated(); - const [loading, setLoading] = useState(false); - const [displayPanel, setDisplayPanel] = useState(false); - const [content, setContent] = useState(""); - const [olderContent, setOlderContent] = useState(""); - const [image, setimage] = useState(""); - const [title, setTitle] = useState(""); - const [error, setError] = useState(""); - const [newUpdatedImages, setNewUpdatedImages] = useState(null); - const [Img, setImg] = useState(true); - const [id, setId] = useState(null); + const token = isAutheticated(); + const [loading, setLoading] = useState(false); + const [displayPanel, setDisplayPanel] = useState(false); + const [content, setContent] = useState(""); + const [olderContent, setOlderContent] = useState(""); + const [image, setimage] = useState(""); + const [title, setTitle] = useState(""); + const [error, setError] = useState(""); + const [newUpdatedImages, setNewUpdatedImages] = useState(null); + const [Img, setImg] = useState(true); + const [id, setId] = useState(null); - const handleContentChange = (content, delta, source, editor) => { - setContent(editor.getHTML()); - }; - //get Blogdata - const getPanel = async () => { - try { - const res = await axios.get(`/api/panel/panel4/get`, { - headers: { - "Access-Control-Allow-Origin": "*", - Authorization: `Bearer ${token}`, - }, - }); - if (res?.status === 200) { - setTitle(res?.data?.panel4[0]?.title); - if(res?.data?.panel4[0]?.image!==undefined && res?.data?.panel4[0]?.image!==null){ - setimage(res?.data?.panel4[0]?.image); - } - setContent(res?.data?.panel4[0]?.content); - setOlderContent(res?.data?.panel4[0]?.content); - setDisplayPanel(res?.data?.panel4[0]?.displayPanel); - setId(res?.data?.panel4[0]?._id); - setImg(false); - - } - - } catch (err) { - console.error(err) - swal({ - title: "Error", - text: "Unable to fetch the panel content", - icon: "error", - button: "Retry", - dangerMode: true, - }); + const handleContentChange = (content, delta, source, editor) => { + setContent(editor.getHTML()); + }; + //get Blogdata + const getPanel = async () => { + try { + const res = await axios.get(`/api/panel/panel4/get`, { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + }); + if (res?.status === 200) { + setTitle(res?.data?.panel4[0]?.title); + if ( + res?.data?.panel4[0]?.image !== undefined && + res?.data?.panel4[0]?.image !== null + ) { + setimage(res?.data?.panel4[0]?.image); } - }; + setContent(res?.data?.panel4[0]?.content); + setOlderContent(res?.data?.panel4[0]?.content); + setDisplayPanel(res?.data?.panel4[0]?.displayPanel); + setId(res?.data?.panel4[0]?._id); + setImg(false); + } + } catch (err) { + console.error(err); + swal({ + title: "Error", + text: "Unable to fetch the panel content", + icon: "error", + button: "Retry", + dangerMode: true, + }); + } + }; - useEffect(() => { - getPanel(); - }, []); + useEffect(() => { + getPanel(); + }, []); - const handleFileChange = (e) => { - const files = e.target.files; - // Reset error state - setError(""); + const handleFileChange = (e) => { + const files = e.target.files; + // Reset error state + setError(""); - // Check if more than one image is selected - if (files.length > 1 || newUpdatedImages !== null) { - setError("You can only upload one image."); - return; - } + // Check if more than one image is selected + if (files.length > 1 || newUpdatedImages !== null) { + setError("You can only upload one image."); + return; + } - // Check file types and append to selectedFiles - const allowedTypes = ["image/jpeg", "image/png", "image/jpg"]; - const file = files[0]; // Only one file is selected, so we get the first one + // Check file types and append to selectedFiles + const allowedTypes = ["image/jpeg", "image/png", "image/jpg"]; + const file = files[0]; // Only one file is selected, so we get the first one - if (allowedTypes.includes(file.type)) { - setNewUpdatedImages(file); - setimage(file); + if (allowedTypes.includes(file.type)) { + setNewUpdatedImages(file); + setimage(file); + } else { + setError("Please upload only PNG, JPEG, or JPG files."); + } + }; - } else { - setError("Please upload only PNG, JPEG, or JPG files."); - } - }; + const handelDelete = async (public_id) => { + const ary = public_id?.split("/"); + setNewUpdatedImages(null); - const handelDelete = async (public_id) => { - const ary = public_id.split("/"); - setNewUpdatedImages(null); + const res = await axios.delete( + `/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`, + { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + } + ); + if (res) { + setimage(null); + setImg(true); + } + }; - const res = await axios.delete( - `/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`, - { - headers: { - "Access-Control-Allow-Origin": "*", - Authorization: `Bearer ${token}`, - }, - } - ); - if (res) { - setimage(null); - setImg(true); - } - }; - + const addContent = async () => { + const formData = new FormData(); + formData.append("title", title); + formData.append("content", content); + formData.append("displayPanel", displayPanel); + formData.append("image", image); - const addContent = async () => { + const response = await axios.post("/api/panel/panel4/add", formData, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + if (response.status == 201) { + swal({ + title: "Congratulations!!", + text: "Panel 4 added successfully!", + icon: "success", + button: "OK", + }); + } + }; - const formData = new FormData(); - formData.append("title", title); - formData.append("content", content); - formData.append("displayPanel", displayPanel); - formData.append("image", image); + const updateContent = () => { + if (title === "" || content === "") { + swal({ + title: "Warning", + text: "Fill all mandatory fields", + icon: "error", + button: "Close", + dangerMode: true, + }); + return; + } + setLoading(true); - const response = await axios.post( - "/api/panel/panel4/add", - formData, - { - headers: { - Authorization: `Bearer ${token}`, - }, - } - ); - if (response.status == 201) { - swal({ - title: "Congratulations!!", - text: "Panel 4 added successfully!", - icon: "success", - button: "OK", - }); - } - }; + const formData = new FormData(); + formData.append("title", title); + formData.append("content", content); + formData.append("displayPanel", displayPanel); - const updateContent = () => { - if (title === "" || content === "") { - swal({ - title: "Warning", - text: "Fill all mandatory fields", - icon: "error", - button: "Close", - dangerMode: true, - }); - return; - } - setLoading(true); + if (newUpdatedImages !== null) { + formData.append("image", newUpdatedImages); + } + axios + .patch(`/api/panel/panel4/update/${id}`, formData, { + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "multipart/form-data", + "Access-Control-Allow-Origin": "*", + }, + }) + .then((res) => { + swal({ + title: "Updated", + text: " Updated successfully!", + icon: "success", + button: "ok", + }); + setLoading(false); + }) + .catch((err) => { + setLoading(false); - const formData = new FormData(); - formData.append("title", title); - formData.append("content", content); - formData.append("displayPanel", displayPanel); + const message = err.response?.data?.message + ? err.response?.data?.message + : "Something went wrong!"; + swal({ + title: "Warning", + text: message, + icon: "error", + button: "Retry", + dangerMode: true, + }); + }); + }; - if (newUpdatedImages !== null) { - formData.append("image", newUpdatedImages); - } + const handleSaveClick = async () => { + if (!olderContent) { + addContent(); + } else { + updateContent(); + } + // // Reload terms and conditions + // await getPrivacyPolicy(); + }; - axios - .patch(`/api/panel/panel4/update/${id}`, formData, { - headers: { - Authorization: `Bearer ${token}`, - "Content-Type": "multipart/form-data", - "Access-Control-Allow-Origin": "*", - }, - }) - .then((res) => { - swal({ - title: "Updated", - text: " Updated successfully!", - icon: "success", - button: "ok", - }); - setLoading(false); - }) - .catch((err) => { - setLoading(false); - - const message = err.response?.data?.message - ? err.response?.data?.message - : "Something went wrong!"; - swal({ - title: "Warning", - text: message, - icon: "error", - button: "Retry", - dangerMode: true, - }); - }); - }; - - const handleSaveClick = async () => { - if (!olderContent) { - addContent(); - } else { - updateContent(); - } - // // Reload terms and conditions - // await getPrivacyPolicy(); - }; - - const handleChange = (event) => { - setDisplayPanel(event.target.checked); - }; - return ( -
-
-
-
+
+
+
-
- Panel 4 -
-
-

-
- -
- - } - label="Display Panel" - /> - - - - - - -
-
-
+ > +
+ Panel 4
-
-
-
-
-
- - setTitle(e.target.value)} - /> -
-
- - - - - {error &&

{error}

} -
- - *You cannot upload more than 1 image - -
- - - {image && ( - - Panel Image - handelDelete(image?.public_id)} - fontSize="small" - sx={{ - color: "white", - position: "absolute", - cursor: "pointer", - padding: "0.2rem", - background: "black", - borderRadius: "50%", - }} - /> - - )} - - -
-
-
-
-
-
-
- - -
-
-
+
+

+ +
+ + } + label="Display Panel" + /> + + + + +
+
- ); +
+
+
+
+
+
+ + setTitle(e.target.value)} + /> +
+
+ + + + + {error &&

{error}

} +
+ + *You cannot upload more than 1 image + +
+ + + {image && ( + + Panel Image + {image?.public_id && ( + handelDelete(image?.public_id)} + fontSize="small" + sx={{ + color: "white", + position: "absolute", + cursor: "pointer", + padding: "0.2rem", + background: "black", + borderRadius: "50%", + }} + /> + )} + + )} + +
+
+
+
+
+
+
+ + +
+
+
+
+
+ ); }; export default Editpanel4;