//pages/index.tsx
// import { useState } from "react";
// import styles from "@/styles/Home.module.css";
// import ClientPortal from "../components/ClientPortal/ClientPortal";
// export default function Home() {
//   const [showPortal, setShowPortal] = useState(false);
//   const handleModal = () => {
//     setShowPortal(!showPortal);
//   };
  

//   return (
//     <>
//       <main className={`${styles.main}`}>
//         <h1>Implementation portal in next JS</h1>
//         <button onClick={handleModal} className={styles.btn}>
//           Read Blog
//         </button>
//       </main>
//       <ClientPortal
//         selector="myportal"
//         show={showPortal}
//       >
//         <div className={styles.overflow}>
//           <div className={styles.modal}>
//             <div className={styles.header}>
//               <h4>Lorem Ipsum</h4>
//               <button onClick={handleModal} className={styles.removeButton}>
//               {/* <button className={styles.removeButton}> */}
//                 <svg
//                   xmlns="http://www.w3.org/2000/svg"
//                   height="1em"
//                   viewBox="0 0 384 512"
//                 >
//                   <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
//                 </svg>
//               </button>
//             </div>
//             <div className={styles.body}>
//               <p>
//                 Basically, React Portal is a powerful technique to create a
//                 first-class way to render children into a DOM (Document object
//                 modal) Node from outside of their parent component hierarchy.
//               </p>
//               <div className={styles.reactontent}>
//                 <h4>Industry&apos;s stand 1960s with the release</h4>
//                 <p>
//                   has been the industry&apos;s stand 1960s with the release of
//                   Letraset sheets containing Lorem Ipsum passages, and more
//                   recently with desktop publishing software like Aldus PageMaker
//                   including versions of Lorem Ipsum.
//                 </p>
//               </div>
//               <div className={styles.reactontent}>
//                 <p>
//                   Lorem Ipsum is simply dummy text of the printing It has
//                   survived not only five centuries, but also the leap into
//                   electronic typesetting, remaining essentially unchanged. It
//                   was popularised in the 1960s with the release of Letraset
//                   sheets containing Lorem Ipsum passages, and more recently
//                 </p>
//               </div>
//               <div className={styles.reactontent}>
//                 <p>
//                   Lorem Ipsum is simply dummy text of the printing and
//                   typesetting industry. Lorem Ipsum has been the industry&apos;s
//                   standard dummy text ever since the 1500s, when an unknown
//                   printer took a galley of type and Lorem Ipsum.
//                 </p>
//               </div>
//             </div>
//           </div>
//         </div>
//       </ClientPortal>
//     </>
//   );
// }