src/pages/test/trigger-modal-button.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
35
36
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>
    </>
  );
}