From c036d7d5ca0bc051592fb451ca48642323f70eae Mon Sep 17 00:00:00 2001
From: Djeeberjr <djeeberjr@gmail.com>
Date: Tue, 16 Nov 2021 00:58:56 +0100
Subject: [PATCH] export modal

---
 src/components/App.tsx   | 25 ++++++++++++++++++++-----
 src/components/Modal.tsx | 26 ++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Modal.tsx

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 9e920f0..8fdd670 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -2,25 +2,40 @@ import React, { useState } from "react"
 import RetakesConfig from "../types/RetakesConfig"
 import AllDecks from "./AllDecks"
 import MenuBar from "./MenuBar"
+import Modal from "./Modal"
 
 
 
 const App: React.FC = () => {
 	const [retakesConfig,setRetakesConfig] = useState(new RetakesConfig())
+	const [showExport,setShowExport] = useState(false)
+	const [exportText,setExportText] = useState("")
 
 	return (
 		<div className="text-white">
 			<MenuBar 
 				onExport={()=>{
-					const exportString = retakesConfig.toCvar()
-					console.log(exportString)
+					setExportText(retakesConfig.toCvar())
+					setShowExport(true)
 				}}
 				onExportJson={()=>{
-					const jsonString = JSON.stringify(retakesConfig)
-					console.log(jsonString)
-				}} 
+					setExportText(JSON.stringify(retakesConfig))
+					setShowExport(true)
+				}}
 			/>
 			<AllDecks retakesConfig={retakesConfig} onChange={(newConfig)=>setRetakesConfig(newConfig)} />
+
+			<Modal show={showExport} onCloseClick={()=>setShowExport(false)}>
+				<div className="flex justify-center mb-2">
+					<textarea
+						cols={50} rows={10}
+						value={exportText}
+						readOnly
+						className="text-black bg-transparent border-2 border-gray-900"
+					/>
+				</div>
+				<div className="bg-gray-700 button flex justify-center" >Copy to clipboard</div>
+			</Modal>
 		</div>
 	)
 }
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
new file mode 100644
index 0000000..c97b236
--- /dev/null
+++ b/src/components/Modal.tsx
@@ -0,0 +1,26 @@
+import React from "react"
+
+interface Props {
+	show: boolean
+	onCloseClick?: ()=>void
+}
+
+const Modal: React.FC<Props> = ({children,show,onCloseClick}) => {
+	return (
+		<div 
+			className={`${!show?"hidden":"" } 
+			fixed z-10 left-0 top-0 w-full h-full 
+			flex justify-center items-center bg-gray-900 bg-opacity-80`}
+			onClick={()=>{
+				onCloseClick?.()
+			}}>
+			<div className="bg-gray-800 mx-auto p-5 border-2 border-gray-800 w-10/12 overflow-hidden max-h-full" onClick={(e)=>{
+				e.stopPropagation()
+			}}>
+				{children}
+			</div>
+		</div>
+	)
+}
+
+export default Modal