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

// This is a Server Component by default
import ServerWord from "@/zoom/ServerWord";
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 (
    <div>
      {/*
        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}`}
      >
        <ServerWord word={"fantastic"} lang={"en"} />
      </TriggerModalButton>
    </div>
  );
}