Update Modal

frontend/src/components/Modal/importer.js

@@ -44,11 +44,11 @@ export default function Import(props){
                             <button id="shared-sub-tab" data-tabs-target="#Gradio" type="button" role="tab" aria-controls="shared-gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 px-6 text-base font-sans font-bold  ${subTab === 1 ? 'bg-gray-300' : '' }  hover:bg-gray-300  `}>Shared</button>
                             </li>
                         </ul>
-                        {subTab === 0 && <div className='p-5 text-black'> Coming soon ....</div>}
+                        {subTab === 0 && <Local/>}
                         {subTab === 1 && <Shared textHandler={props.textHandler} appendHandler={props.appendHandler} />}
 
                         {props.catch && <div className='p-5'>
-                                        <Message negative>
+                                        <Message floating negative>
                                         <Message.Header className=" text-lg text-center">🚫 Something went wrong...</Message.Header>
                                             <br/>
                                             <h1 className=" underline pb-3 font-bold text-lg">🤔 Possible Things That could of happen <br/></h1>
@@ -73,6 +73,22 @@ export default function Import(props){
     </div>)
 }
 
+function Local(props){
+    return (
+        <div className='p-5'>
+        <Message floating color=''>
+            
+            <Message.Header>🏗️ Comming soon...</Message.Header> 
+            <Message.Content className='p-5'>
+            This tab will allow you grab your function from a given directory and build
+            your own tabular module gradio functions
+            </Message.Content>
+
+        </Message>
+        </div>
+    )
+}
+
 function Shared(props){
     const [preview, setPreview] = useState("")
     const [fetchable, setFetch] = useState(false)
@@ -92,8 +108,11 @@ function Shared(props){
         }
     
     return (
-        <div className='w-full shadow-lg'>
-                        
+        <div className='w-full shadow-lg' onKeyPress={(e)=>{
+            if (e.key.includes("Enter")) props.appendHandler()
+        }}>
+            <div className='p-5'>
+            <Message color='' floating>            
                          <div className={`flex items-center rounded-md bg-light-white mt-6 border-dashed`}>
                             <label className="relative block w-full p-5 focus:shadow-xl">
                                 <span className={`absolute inset-y-0 left-0 flex items-center pl-8`}>
@@ -112,8 +131,10 @@ function Shared(props){
                         </div>   
                         { fetchable === true && <div className=' w-full'>
                             <h1 className=' text-xl font-sans font-bold text-center text-black mb-2'> Preview </h1>
-                            <div className='p-4 w-3/4 bg-gray-200 mr-auto ml-auto rounded-xl'>
-                                <iframe title='Preview' src={preview} className=' w-full h-80 mr-auto ml-auto'/>
+                            <div className='p-3 px-1 w-3/4 h-80 bg-gray-200 mr-auto ml-auto rounded-xl'>
+                                <div className='w-full h-full overflow-hidden relative -ml-[5px]'>
+                                <iframe title='Preview' src={preview} className=' absolute top-0 bottom-0 left-0 -right-[25px] overflow-y-scroll w-full h-full mr-auto ml-auto'/>
+                                </div>
                             </div>
                         </div>}
                         <div className={`flex items-center rounded-md bg-light-white mt-6  border-dashed`}>
@@ -131,7 +152,7 @@ function Shared(props){
                             />
                     </label>
                     </div> 
-                    <div className=' ml-4'>
+                    <div className=' right-0 ml-5'>
                         <button className="relative inline-flex justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-sans font-bold text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800"
                                 onClick={()=>{props.appendHandler()}}>
                             <span className="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
@@ -139,6 +160,8 @@ function Shared(props){
                             </span>
                         </button>
                     </div>
+                </Message>
+                </div>
                 </div>  
                          
     )

frontend/src/css/dist/output.css

@@ -583,6 +583,10 @@ video {
   }
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .visible {
   visibility: visible;
 }
@@ -644,6 +648,38 @@ video {
   top: 1rem;
 }
 
+.-right-4 {
+  right: -1rem;
+}
+
+.-right-\[17px\] {
+  right: -17px;
+}
+
+.-right-\[20px\] {
+  right: -20px;
+}
+
+.-right-\[30px\] {
+  right: -30px;
+}
+
+.-right-\[28px\] {
+  right: -28px;
+}
+
+.-right-\[25px\] {
+  right: -25px;
+}
+
+.-right-\[22px\] {
+  right: -22px;
+}
+
+.-right-\[23px\] {
+  right: -23px;
+}
+
 .z-20 {
   z-index: 20;
 }
@@ -676,18 +712,6 @@ video {
   margin: 0px;
 }
 
-.m-3 {
-  margin: 0.75rem;
-}
-
-.m-1 {
-  margin: 0.25rem;
-}
-
-.m-0\.5 {
-  margin: 0.125rem;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -700,28 +724,28 @@ video {
   margin-top: 1.5rem;
 }
 
-.ml-4 {
-  margin-left: 1rem;
-}
-
 .mb-2 {
   margin-bottom: 0.5rem;
 }
 
-.mt-4 {
-  margin-top: 1rem;
-}
-
-.-mt-2 {
-  margin-top: -0.5rem;
+.mr-auto {
+  margin-right: auto;
 }
 
 .ml-auto {
   margin-left: auto;
 }
 
-.mr-auto {
-  margin-right: auto;
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.-mt-2 {
+  margin-top: -0.5rem;
 }
 
 .-mt-3 {
@@ -732,6 +756,70 @@ video {
   margin-top: 0.25rem;
 }
 
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.-ml-2 {
+  margin-left: -0.5rem;
+}
+
+.-ml-3 {
+  margin-left: -0.75rem;
+}
+
+.-ml-1 {
+  margin-left: -0.25rem;
+}
+
+.-ml-0 {
+  margin-left: -0px;
+}
+
+.-ml-\[8px\] {
+  margin-left: -8px;
+}
+
+.-ml-\[10px\] {
+  margin-left: -10px;
+}
+
+.-ml-\[4px\] {
+  margin-left: -4px;
+}
+
+.-ml-\[5px\] {
+  margin-left: -5px;
+}
+
+.ml-96 {
+  margin-left: 24rem;
+}
+
+.ml-\[30rem\] {
+  margin-left: 30rem;
+}
+
+.ml-\[46rem\] {
+  margin-left: 46rem;
+}
+
+.ml-\[40rem\] {
+  margin-left: 40rem;
+}
+
+.ml-\[44rem\] {
+  margin-left: 44rem;
+}
+
+.ml-5 {
+  margin-left: 1.25rem;
+}
+
 .block {
   display: block;
 }
@@ -760,6 +848,10 @@ video {
   height: 20px;
 }
 
+.h-80 {
+  height: 20rem;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -788,22 +880,6 @@ video {
   height: 41px;
 }
 
-.h-60 {
-  height: 15rem;
-}
-
-.h-80 {
-  height: 20rem;
-}
-
-.h-\[10px\] {
-  height: 10px;
-}
-
-.h-\[30px\] {
-  height: 30px;
-}
-
 .w-full {
   width: 100%;
 }
@@ -816,6 +892,10 @@ video {
   width: 20px;
 }
 
+.w-3\/4 {
+  width: 75%;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -852,34 +932,6 @@ video {
   width: 100vw;
 }
 
-.w-1\/2 {
-  width: 50%;
-}
-
-.w-3\/4 {
-  width: 75%;
-}
-
-.w-\[90\%\] {
-  width: 90%;
-}
-
-.w-\[98\%\] {
-  width: 98%;
-}
-
-.w-\[100\%\] {
-  width: 100%;
-}
-
-.w-\[10px\] {
-  width: 10px;
-}
-
-.w-\[30px\] {
-  width: 30px;
-}
-
 .max-w-full {
   max-width: 100%;
 }
@@ -969,6 +1021,26 @@ video {
   overflow: hidden;
 }
 
+.overflow-scroll {
+  overflow: scroll;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
 .break-all {
   word-break: break-all;
 }
@@ -985,16 +1057,12 @@ video {
   border-radius: 0.375rem;
 }
 
-.rounded-full {
-  border-radius: 9999px;
-}
-
 .rounded-xl {
   border-radius: 0.75rem;
 }
 
-.rounded-3xl {
-  border-radius: 1.5rem;
+.rounded-full {
+  border-radius: 9999px;
 }
 
 .rounded-t-lg {
@@ -1129,11 +1197,6 @@ video {
   background-color: rgb(254 169 89 / var(--tw-bg-opacity));
 }
 
-.bg-gray-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
-}
-
 .bg-gradient-to-bl {
   background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
 }
@@ -1463,16 +1526,16 @@ video {
   line-height: 1.75rem;
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
 }
 
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;