thanks gemini, very pretty

1 files changed, 37 insertions, 0 deletions

diff --git a/src/pages/test/trigger-modal-button.tsx b/src/pages/test/trigger-modal-button.tsx
new file mode 100644
index 0000000..eaa2dda
--- /dev/null
+++ b/src/pages/test/trigger-modal-button.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { useState, ReactNode } from "react";
+import ClientModal from "./client-modal"; // The modal shell
+
+interface TriggerModalButtonProps {
+  children: ReactNode; // This will be the <ProductDetailsServer />
+  buttonText?: string;
+  modalTitle?: string;
+}
+
+export default function TriggerModalButton({
+  children,
+  buttonText = "Open Product Details",
+  modalTitle,
+}: TriggerModalButtonProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        onClick={() => setIsModalOpen(true)}
+        className="px-4 py-2 font-semibold text-white bg-indigo-600 rounded-md hover:bg-indigo-700"
+      >
+        {buttonText}
+      </button>
+
+      <ClientModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        title={modalTitle || ""}
+      >
+        {children} {/* Pass the Server Component content here */}
+      </ClientModal>
+    </>
+  );
+}