thanks gemini, very pretty

1 files changed, 59 insertions, 0 deletions

diff --git a/src/pages/test/client-modal.tsx b/src/pages/test/client-modal.tsx
new file mode 100644
index 0000000..293e28c
--- /dev/null
+++ b/src/pages/test/client-modal.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { useState, ReactNode, useEffect } from "react";
+
+interface ClientModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode; // This will receive the Server Component's output
+  title?: string;
+}
+
+export default function ClientModal({
+  isOpen,
+  onClose,
+  children,
+  title = "Modal",
+}: ClientModalProps) {
+  // Optional: Prevent body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+      onClick={onClose} // Close on overlay click
+    >
+      <div
+        className="p-6 bg-white rounded-lg shadow-xl w-11/12 max-w-lg"
+        onClick={(e) => e.stopPropagation()} // Prevent click from closing modal if clicking inside content
+      >
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-xl font-semibold">{title}</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-500 hover:text-gray-700"
+            aria-label="Close modal"
+          >
+            × {/* A simple 'X' close button */}
+          </button>
+        </div>
+        <div>
+          {children} {/* Server Component content will be rendered here */}
+        </div>
+      </div>
+    </div>
+  );
+}