Import/Export Prototype

src/app/modules.tsx

@@ -1,4 +1,5 @@
 import { MouseEventHandler } from "react";
+import Popup from "reactjs-popup";
 
 export function Box({title, placeholder, id}:
   {title:string; placeholder:string; id:string}) {
@@ -12,7 +13,7 @@ export function Box({title, placeholder, id}:
             className="body_box"
             id={id}
             wrap="soft"
-            required
+            rows={6}
             placeholder={placeholder}
           ></textarea>
         </div>
@@ -21,13 +22,12 @@ export function Box({title, placeholder, id}:
 }
 
 export function Button({title, className, onClickFunc}:
-  {title:string; className:string; onClickFunc: MouseEventHandler}) {
+  {title:string; className:string|undefined; onClickFunc: MouseEventHandler}) {
 
   return(
     <button
       className={className}
       onClick={onClickFunc}
-      type="submit"
       >
       {title}
   </button>
@@ -35,6 +35,39 @@ export function Button({title, className, onClickFunc}:
   );
 }
 
+export function Popup_Button({title, className}:
+  {title:string; className:string|undefined;}) {
+
+  return(
+    <Popup
+      trigger={<button
+        className={className}>
+          {title}
+      </button>}
+      position="right center"
+      modal
+      nested>
+        {close => (
+          <div className="popup_bg">
+          <button  onClick={close}>
+            &times;
+          </button>
+          <div className="header"> {title} </div>
+          <div className="content">
+            This is a popup example.
+          </div>
+          <div className="actions">
+            <button className="button" onClick={close}>
+              Cancel</button>
+          </div>
+        </div>
+        )}
+      </Popup>
+    
+  
+  );
+}
+
 export function Output({id, text}:
   {id:string; text:string}) {