From bc49083dd5110002936bbc7bd24ab1e02d19efc8 Mon Sep 17 00:00:00 2001 From: ManuP6789 Date: Wed, 16 Apr 2025 17:20:13 +0100 Subject: [PATCH 1/3] created modifyModal --- src/components/CustomizeEventModal.tsx | 115 +++++++++++++++++++++++++ src/components/TopHeader.tsx | 37 ++++++-- 2 files changed, 143 insertions(+), 9 deletions(-) create mode 100644 src/components/CustomizeEventModal.tsx diff --git a/src/components/CustomizeEventModal.tsx b/src/components/CustomizeEventModal.tsx new file mode 100644 index 0000000..6432489 --- /dev/null +++ b/src/components/CustomizeEventModal.tsx @@ -0,0 +1,115 @@ +import React, { useEffect, useRef, useState } from "react"; +import { Calendar } from "./Calendar"; + +interface CustomizeEventProps { + modalVisible: boolean; + setModalVisible: (visible: boolean) => void; +} + +const CustomizeEventModal = (props: CustomizeEventProps) => { + const { modalVisible, setModalVisible } = props; + + const modalRef = useRef(null); + const [selectedDate, setSelectedDate] = useState( + new Date() + ); + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + modalRef.current && + !modalRef.current.contains(event.target as Node) + ) { + setModalVisible(false); + } + }; + + if (modalVisible) { + document.addEventListener("mousedown", handleClickOutside); + } + + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, [modalVisible, setModalVisible]); + + if (!modalVisible) return null; + + return ( +
+
+ {/* Close Button */} + + + {/* Event Title */} +

Add event title

+ + {/* Time Section */} +
+
+ {/* Placeholder for time icon */} +
{/* Icon here */}
+ Time +
+
+ {/* Calendar selector */} +
+ +
+ {/* Start and End Time placeholders */} + {/* + */} +
+
+ + {/* Event Description Section */} +
+
+ {/* Placeholder for description icon */} +
{/* Icon here */}
+ Event description (if any) +
+