Enhance modal functionality with ModalContainer component; update ShareModal to use ModalWrapper; improve responsive text sizes in index.css; integrate FloatingActionButton in HomePage for popup sharing.

2025-10-09 12:32:53 +05:00
parent 0b8edce9d6
commit 8aef8a530b
14 changed files with 357 additions and 26 deletions
@@ -0,0 +1,33 @@
+import usePopupStore from "../store/popupStore";
+import XMarkIcon from "./icons/XMarkIcon";
+import Button from "./ui/Button";
+
+interface PopupHeaderProps {
+  title?: string;
+  leftButton?: React.ReactNode;
+  headerRef: React.RefObject<HTMLDivElement | null>;
+}
+
+function PopupHeader({ title, leftButton, headerRef }: PopupHeaderProps) {
+  const { setPopup } = usePopupStore();
+
+  return (
+    <div
+      ref={headerRef}
+      className="2xl:p-[1.111vw] p-4 flex justify-between items-center cursor-grab select-none relative"
+    >
+      <div className="2xl:size-[2.222vw] size-8">{leftButton}</div>
+      {title && (
+        <p className="title-s flex-1 font-medium text-center">{title}</p>
+      )}
+      <Button variant="secondary" size="small" onClick={() => setPopup(null)}>
+        <div className="2xl:size-[1.111vw] size-4">
+          <XMarkIcon />
+        </div>
+      </Button>
+      <hr className="bg-[#F2F2F2] 2xl:h-[0.069vw] h-px absolute bottom-0 w-[calc(100%-2.778vw)] left-[1.389vw]" />
+    </div>
+  );
+}
+
+export default PopupHeader;