+ {category?.imageUrl ? (
+ 
+ ) : (
+
+
+
+
+ )}
+
+
+ {status.label}
+
+
+
+
+
+
+
+ + {category?.name || "Unnamed category"} +
+ {category?.slug && ( +
+
+ )}
+
+ {category?.description && (
+
+
+ {showActions && (
+ + {category.description} +
+ )} +
+
+
+ {onViewDetails && (
+ e.stopPropagation()}
+ >
+
+ )}
+ 
+
+ );
+}
+
+export default Logo;
diff --git a/bookmyvenue/apps/Frontend/src/components/common/Modal.jsx b/bookmyvenue/apps/Frontend/src/components/common/Modal.jsx
new file mode 100644
index 0000000000..cece37229c
--- /dev/null
+++ b/bookmyvenue/apps/Frontend/src/components/common/Modal.jsx
@@ -0,0 +1,83 @@
+import { useEffect } from "react";
+
+function Modal({ isOpen, onClose, title, children, maxWidth = "max-w-md" }) {
+ useEffect(() => {
+ if (isOpen) {
+ document.body.style.overflow = "hidden";
+ } else {
+ document.body.style.overflow = "";
+ }
+
+ return () => {
+ document.body.style.overflow = "";
+ };
+ }, [isOpen]);
+
+ useEffect(() => {
+ const handleEscape = (e) => {
+ if (e.key === "Escape") {
+ onClose();
+ }
+ };
+
+ if (isOpen) {
+ window.addEventListener("keydown", handleEscape);
+ }
+
+ return () => {
+ window.removeEventListener("keydown", handleEscape);
+ };
+ }, [isOpen, onClose]);
+
+ if (!isOpen) return null;
+
+ return (
+