thanks gemini, very pretty

1 files changed, 34 insertions, 0 deletions

diff --git a/src/pages/test/index.tsx b/src/pages/test/index.tsx
new file mode 100644
index 0000000..35ce5db
--- /dev/null
+++ b/src/pages/test/index.tsx
@@ -0,0 +1,34 @@
+// This is a Server Component by default
+import ProductDetailsServer from "./product-details-server";
+import TriggerModalButton from "./trigger-modal-button"; // We'll make this a client component to manage state
+
+export default function SomePage() {
+  const productIdForModal = "123"; // Or get this dynamically
+
+  return (
+    <main className="container p-8 mx-auto">
+      <h1 className="mb-6 text-3xl font-bold">
+        Modal with Server Component Content
+      </h1>
+      <p>
+        This page demonstrates opening a modal whose content is rendered by a
+        Server Component. The modal shell (open/close logic) is a Client
+        Component.
+      </p>
+
+      {/*
+        The TriggerModalButton will manage the modal's open/close state.
+        It will receive the Server Component as a child to pass to ClientModal.
+      */}
+      <TriggerModalButton
+        modalTitle={`Product Details for ID: ${productIdForModal}`}
+      >
+        <ProductDetailsServer word={"fantastic"} />
+      </TriggerModalButton>
+
+      <div className="mt-8">
+        <p>Other content on the page...</p>
+      </div>
+    </main>
+  );
+}