"use client"; import { useState, ReactNode, useEffect } from "react"; interface ClientModalProps { isOpen: boolean; onClose: () => void; children: ReactNode; // This will receive the Server Component's output title?: string; } export default function ClientModal({ isOpen, onClose, children, }: ClientModalProps) { // Optional: Prevent body scroll when modal is open useEffect(() => { if (isOpen) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "unset"; } return () => { document.body.style.overflow = "unset"; }; }, [isOpen]); if (!isOpen) { return null; } return (
e.stopPropagation()} // Prevent click from closing modal if clicking inside content >
{children} {/* Server Component content will be rendered here */}
); }