src/pages/test/index.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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>
  );
}