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,28 @@
+import Button from "./ui/Button";
+import useModalStore from "../store/modalStore";
+import XMarkIcon from "./icons/XMarkIcon";
+
+interface ModalHeaderProps {
+  title?: string;
+  leftButton?: React.ReactNode;
+}
+
+function ModalHeader({ title, leftButton }: ModalHeaderProps) {
+  const { setModal } = useModalStore();
+
+  return (
+    <div className="2xl:p-[1.111vw] p-4 flex justify-between items-center">
+      <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={() => setModal(null)}>
+        <div className="2xl:size-[1.111vw] size-4">
+          <XMarkIcon />
+        </div>
+      </Button>
+    </div>
+  );
+}
+
+export default ModalHeader;