Update Modal

frontend/src/components/Modal/importer.js

@@ -10,6 +10,7 @@ export default function Import(props){
     const [tab, setTab] = useState("gradio")
     const [subTab, setSubTab] = useState(0)
     
+    
     return (<div>
         <Modal
             basic
@@ -37,17 +38,17 @@ export default function Import(props){
                         <div className='w-full bg-white'>
                         <ul class="flex flex-wrap text-sm font-medium text-center text-gray-500 bg-gray-200 border-gray-200 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800" id="defaultTab" data-tabs-toggle="#defaultTabContent" role="tablist">
                             <li class="" onClick={()=>{setSubTab(0)}}>
-                                <button id="local-sub-tab" data-tabs-target="#local" type="button" role="tab" aria-controls="local-gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 px-6 text-base font-sans font-bold ${subTab === 0 ? 'bg-gray-300' : '' } hover:bg-gray-300  dark:bg-gray-800 dark:hover:bg-gray-700 focus:bg-gray-700`}>Local</button>
+                                <button id="local-sub-tab" data-tabs-target="#local" type="button" role="tab" aria-controls="local-gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 px-6 text-base font-sans font-bold ${subTab === 0 ? 'bg-gray-300' : '' } hover:bg-gray-300 `}>Local</button>
                             </li>
                             <li class="" onClick={()=>{setSubTab(1)}}>
-                            <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  dark:bg-gray-800 dark:hover:bg-gray-700 focus:bg-gray-700`}>Shared</button>
+                            <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 && <></>}
+                        {subTab === 0 && <div className='p-5 text-black'> Coming soon ....</div>}
                         {subTab === 1 && <Shared textHandler={props.textHandler} appendHandler={props.appendHandler} />}
 
-                        {props.catch && 
-                                        <Message negative className='p-2'>
+                        {props.catch && <div className='p-5'>
+                                        <Message 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>
@@ -64,7 +65,8 @@ export default function Import(props){
                                                     <li>- link already exist within the menu</li>
                                                 </ul>
                         
-                                        </Message>}
+                                        </Message>
+                                        </div>}
                         </div> 
                     }
                 </Modal>
@@ -72,6 +74,23 @@ export default function Import(props){
 }
 
 function Shared(props){
+    const [preview, setPreview] = useState("")
+    const [fetchable, setFetch] = useState(false)
+
+    const isFetchable = async (url) => {
+        console.log(url)
+        fetch(url, {mode : "no-cors"}).then((re) => {
+            console.log(re)
+            if(re.url.includes("http://localhost:3000")){
+                setFetch(false)    
+            } else { setFetch(true) }
+            
+          }).catch((err)=>{
+            setFetch(false)
+          })
+          setFetch(false)
+        }
+    
     return (
         <div className='w-full shadow-lg'>
                         
@@ -85,10 +104,18 @@ function Shared(props){
                                     type="text" name="search"
                                     onChange={(e) => {
                                         props.textHandler(e, "text")
-                                       }}
+                                        setPreview(e.target.value)
+                                         setFetch(isFetchable(e.target.value))
+                                    }}
                                     />
                             </label>
                         </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>
+                        </div>}
                         <div className={`flex items-center rounded-md bg-light-white mt-6  border-dashed`}>
                     <label className="relative block p-5 w-full focus:shadow-xl">
                         <span className={`absolute inset-y-0 left-0 flex items-center pl-7`}>
@@ -104,8 +131,8 @@ function Shared(props){
                             />
                     </label>
                     </div> 
-                    <div className='w-full ml-4'>
-                        <button className="relative 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"
+                    <div className=' ml-4'>
+                        <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">
                                 Enter

frontend/src/components/Navagation/navbar.js

@@ -1,9 +1,9 @@
 import React, { Component } from "react";
-import {BsArrowLeftShort, BsSearch} from 'react-icons/bs';
+import {BsArrowLeftShort} from 'react-icons/bs';
 import "../../css/dist/output.css"
 import {ReactComponent as ReactLogo} from '../../images/logo.svg'
 import { random_colour, random_emoji } from "../../helper/visual";
-import { Message, Header, Modal, Button, Icon } from 'semantic-ui-react'
+import { Icon } from 'semantic-ui-react'
 import Import from '../Modal/importer'
 export default class Navbar extends Component{
     constructor(props){
@@ -199,7 +199,8 @@ export default class Navbar extends Component{
      * @param {*} e : event type to get the target value of the current input
      * @param {*} type : text | name string that set the changed value of the input to the current value 
      */
-    updateText(e, type){
+    updateText = (e, type) => {
+        console.log(this.state.open)
         this.setState({open : this.state.open, menu : this.state.menu, text: type === "text" ? e.target.value : this.state.text, name: type === "name" ? e.target.value : this.state.name, colour : this.state.colour, emoji : this.state.emoji,  error : this.state.error, modal : this.state.modal  })
     }
 

frontend/src/css/dist/output.css

@@ -664,10 +664,6 @@ video {
   z-index: 50;
 }
 
-.float-right {
-  float: right;
-}
-
 .float-left {
   float: left;
 }
@@ -680,6 +676,18 @@ 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;
 }
@@ -780,6 +788,22 @@ video {
   height: 41px;
 }
 
+.h-60 {
+  height: 15rem;
+}
+
+.h-80 {
+  height: 20rem;
+}
+
+.h-\[10px\] {
+  height: 10px;
+}
+
+.h-\[30px\] {
+  height: 30px;
+}
+
 .w-full {
   width: 100%;
 }
@@ -828,6 +852,34 @@ 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%;
 }
@@ -889,10 +941,6 @@ video {
   flex-wrap: wrap;
 }
 
-.items-end {
-  align-items: flex-end;
-}
-
 .items-center {
   align-items: center;
 }
@@ -945,6 +993,10 @@ video {
   border-radius: 0.75rem;
 }
 
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
+
 .rounded-t-lg {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
@@ -1077,6 +1129,11 @@ 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));
 }
@@ -1295,6 +1352,10 @@ video {
   padding: 0.25rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;