Merge pull request #1 from LVivona/tester

backend/app.py

@@ -26,7 +26,7 @@ visable = []
 process_map = {}
 
 @app.route("/")
-def Home():
+def Root():
     return jsonify({"message" :"everything is up amd running... 🚀",})
 
 # def IS_STREAMABLE():

backend/main.py

@@ -0,0 +1,31 @@
+from fastapi import FastAPI
+from fastapi.encoders import jsonable_encoder
+
+app = FastAPI()
+
+global STREAMABLE
+
+STREAMABLE = []
+
+@app.get("/")
+def root():
+    return { "Root" : "Server is up"}
+
+@app.put("/port/append/{stream}")
+def push(stream):
+    try:
+        streamline = jsonable_encoder(stream)
+    except E:
+        return {"appended" : True, "error" : f"{E}"}
+
+    STREAMABLE.append(jsonable_encoder(streamline))
+    return {"appended" : True }
+
+@app.get('/port/open')
+def open():
+    return jsonable_encoder(STREAMABLE)
+
+@app.put('/port/remove/{stream}')
+def remove(stream):
+    STREAMABLE.remove(stream)
+    return STREAMABLE

frontend/Makefile

@@ -1,6 +1,6 @@
 start:
 	npm run start
 
-tailwind:
+tw:
 	npx tailwindcss -i ./src/css/input.css -o ./src/css/dist/output.css --watch
 	

frontend/src/components/Modal/importer.js

@@ -0,0 +1,145 @@
+import { Modal, Icon, Message} from 'semantic-ui-react'
+import "../../css/dist/output.css"
+import {ReactComponent as Gradio} from '../../images/gradio.svg'
+import {ReactComponent as Streamlit} from '../../images/streamlit.svg'
+import {ReactComponent as Exit} from '../../images/exit.svg'
+import { useState } from 'react'
+import {BsSearch} from 'react-icons/bs';
+
+export default function Import(props){
+    const [tab, setTab] = useState("gradio")
+    const [subTab, setSubTab] = useState(0)
+    
+    
+    return (<div>
+        <Modal
+            basic
+            open={props.open}
+            size='larg'
+            >
+                <div className='w-full shadow-lg rounded-lg'>
+                    <ul class="flex flex-wrap text-sm font-medium text-center text-gray-500 bg-gray-100 rounded-t-lg 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="mr-2" onClick={()=>{setTab("gradio")}}>
+                            <button id="gradio-tab" data-tabs-target="#Gradio" type="button" role="tab" aria-controls="gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 rounded-tl-lg ${ tab === "gradio" ? 'bg-gray-200'  : 'hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 focus:bg-gray-700'}`}><Gradio className=" w-20 h-10"/></button>
+                        </li>
+                        <li class="mr-2">
+                            <button id="services-tab" data-tabs-target="#Streamlit" type="button" role="tab" aria-controls="services" aria-selected="false" className="inline-block p-4 opacity-30"><Streamlit className=" w-20 h-10"/></button>
+                        </li>
+                    </ul>
+                    <div className='absolute right-5 top-5 z-20 mr-5'
+                         onClick={()=>{props.quitHandeler(false)}}>
+                        <button type="button"
+                                className=" bg-neutral-300 rounded-2xl p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-300 hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+                        <Exit className="w-[20px] h-[20px]"/>
+                        </button>
+                    </div> 
+                </div>
+                    { tab === "gradio" &&
+                        <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 `}>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  `}>Shared</button>
+                            </li>
+                        </ul>
+                        {subTab === 0 && <div className='p-5 text-black'> Coming soon ....</div>}
+                        {subTab === 1 && <Shared textHandler={props.textHandler} appendHandler={props.appendHandler} />}
+
+                        {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>
+                                            <ul className="font-bold">
+                                                    <li key={"error_1"}>- The input was empty</li>
+                                                    <li key={"error_2"}>- The connection was forbidden</li>
+                                                    <li key={"error_3"}>- The name was already taken</li>
+                                                    <li key={"error_4"}>- The link you gave did not pass the regex</li>
+                                                    <ul className="px-6">
+                                                        <li key={"error_5"}>- http://localhost:xxxx</li>
+                                                        <li key={"error_6"}>- http://xxxxx.gradio.app</li>
+                                                        <li key={"error_7"}>- https://hf.space/embed/$user/$space_name/+</li>
+                                                    </ul>
+                                                    <li>- link already exist within the menu</li>
+                                                </ul>
+                        
+                                        </Message>
+                                        </div>}
+                        </div> 
+                    }
+                </Modal>
+    </div>)
+}
+
+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'>
+                        
+                         <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`}>
+                                    <BsSearch className="block float-left cursor-pointer text-gray-500"/>
+                                </span>
+                                <input className={`placeholder:italic placeholder:text-slate-400 text-black block w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm bg-transparent`}  
+                                    placeholder={`URL`}
+                                    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`}>
+                            <Icon className=" text-gray-500 block float-left cursor-pointer mr-2" name="address card"/>
+                        </span>
+                        <input className={`placeholder:italic placeholder:text-slate-400 text-black block bg-transparent w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1  sm:text-sm`} 
+                            placeholder={`Name` }
+                            type="text" name="search"
+                            autoComplete='off'
+                            onChange={(e) => {
+                                props.textHandler(e, "name")
+                               }}
+                            />
+                    </label>
+                    </div> 
+                    <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
+                            </span>
+                        </button>
+                    </div>
+                </div>  
+                         
+    )
+}

frontend/src/components/Navagation/navbar.js

@@ -1,10 +1,10 @@
 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){
         super(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  })
     }
 
@@ -242,8 +243,12 @@ export default class Navbar extends Component{
                         <Icon className=" block mr-auto ml-auto" name="plus"/>
                     </div>
                 </div>
-
-                <Modal
+                <Import open={this.state.modal} 
+                        quitHandeler={this.handelModal}
+                        textHandler={this.updateText}
+                        appendHandler={this.append_gradio}
+                        catch={this.state.error}/>
+                {/* <Modal
                     basic
                     open={this.state.modal}
                     size='small'
@@ -316,7 +321,7 @@ export default class Navbar extends Component{
                         <Icon name='checkmark' /> Append
                         </Button>
                     </Modal.Actions>                    
-                </Modal>
+                </Modal> */}
 
                 <div className=" relative z-10 h-auto overflow-auto pt-4">
                     <ul className="pt-2">

frontend/src/css/dist/output.css

@@ -604,18 +604,26 @@ video {
   bottom: 0px;
 }
 
-.-right-3 {
-  right: -0.75rem;
+.right-5 {
+  right: 1.25rem;
 }
 
-.top-9 {
-  top: 2.25rem;
+.top-5 {
+  top: 1.25rem;
 }
 
 .left-0 {
   left: 0px;
 }
 
+.-right-3 {
+  right: -0.75rem;
+}
+
+.top-9 {
+  top: 2.25rem;
+}
+
 .bottom-0 {
   bottom: 0px;
 }
@@ -624,28 +632,20 @@ video {
   top: 0px;
 }
 
-.-bottom-1 {
-  bottom: -0.25rem;
+.-bottom-0 {
+  bottom: -0px;
 }
 
-.-right-2 {
-  right: -0.5rem;
+.right-0 {
+  right: 0px;
 }
 
 .top-4 {
   top: 1rem;
 }
 
-.right-5 {
-  right: 1.25rem;
-}
-
-.-bottom-0 {
-  bottom: -0px;
-}
-
-.right-0 {
-  right: 0px;
+.z-20 {
+  z-index: 20;
 }
 
 .-z-20 {
@@ -656,10 +656,6 @@ video {
   z-index: 10;
 }
 
-.z-20 {
-  z-index: 20;
-}
-
 .-z-10 {
   z-index: -10;
 }
@@ -680,14 +676,38 @@ video {
   margin: 0px;
 }
 
-.m-5 {
-  margin: 1.25rem;
+.m-3 {
+  margin: 0.75rem;
 }
 
 .m-1 {
   margin: 0.25rem;
 }
 
+.m-0\.5 {
+  margin: 0.125rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mr-5 {
+  margin-right: 1.25rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -704,14 +724,6 @@ video {
   margin-right: auto;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
-}
-
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .-mt-3 {
   margin-top: -0.75rem;
 }
@@ -720,22 +732,14 @@ video {
   margin-top: 0.25rem;
 }
 
-.mb-auto {
-  margin-bottom: auto;
-}
-
-.mt-auto {
-  margin-top: auto;
-}
-
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .block {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .flex {
   display: flex;
 }
@@ -748,6 +752,14 @@ video {
   display: none;
 }
 
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-\[20px\] {
+  height: 20px;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -756,10 +768,6 @@ video {
   height: 2.25rem;
 }
 
-.h-10 {
-  height: 2.5rem;
-}
-
 .h-auto {
   height: auto;
 }
@@ -772,58 +780,46 @@ video {
   height: 600px;
 }
 
-.h-5 {
-  height: 1.25rem;
-}
-
-.h-\[13rem\] {
-  height: 13rem;
-}
-
-.h-\[4rem\] {
-  height: 4rem;
+.h-\[203\.3333px\] {
+  height: 203.3333px;
 }
 
-.h-\[10rem\] {
-  height: 10rem;
+.h-\[41px\] {
+  height: 41px;
 }
 
-.h-\[11rem\] {
-  height: 11rem;
+.h-60 {
+  height: 15rem;
 }
 
-.h-\[31\.5px\] {
-  height: 31.5px;
+.h-80 {
+  height: 20rem;
 }
 
-.h-\[39\.750px\] {
-  height: 39.750px;
+.h-\[10px\] {
+  height: 10px;
 }
 
-.h-\[157px\] {
-  height: 157px;
+.h-\[30px\] {
+  height: 30px;
 }
 
-.h-\[41px\] {
-  height: 41px;
+.w-full {
+  width: 100%;
 }
 
-.h-\[203\.3px\] {
-  height: 203.3px;
+.w-20 {
+  width: 5rem;
 }
 
-.h-\[203\.3333px\] {
-  height: 203.3333px;
+.w-\[20px\] {
+  width: 20px;
 }
 
 .w-10 {
   width: 2.5rem;
 }
 
-.w-full {
-  width: 100%;
-}
-
 .w-9 {
   width: 2.25rem;
 }
@@ -832,10 +828,6 @@ video {
   width: 8rem;
 }
 
-.w-20 {
-  width: 5rem;
-}
-
 .w-0 {
   width: 0px;
 }
@@ -852,24 +844,40 @@ video {
   width: 1.25rem;
 }
 
+.w-\[41px\] {
+  width: 41px;
+}
+
 .w-screen {
   width: 100vw;
 }
 
-.w-\[31\.5\] {
-  width: 31.5;
+.w-1\/2 {
+  width: 50%;
 }
 
-.w-\[31\.5px\] {
-  width: 31.5px;
+.w-3\/4 {
+  width: 75%;
 }
 
-.w-\[29\.5px\] {
-  width: 29.5px;
+.w-\[90\%\] {
+  width: 90%;
 }
 
-.w-\[41px\] {
-  width: 41px;
+.w-\[98\%\] {
+  width: 98%;
+}
+
+.w-\[100\%\] {
+  width: 100%;
+}
+
+.w-\[10px\] {
+  width: 10px;
+}
+
+.w-\[30px\] {
+  width: 30px;
 }
 
 .max-w-full {
@@ -896,32 +904,22 @@ video {
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.rotate-90 {
-  --tw-rotate: 90deg;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+.cursor-pointer {
+  cursor: pointer;
 }
 
 .cursor-grab {
   cursor: grab;
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.cursor-ns-resize {
-  cursor: ns-resize;
+.cursor-nwse-resize {
+  cursor: nwse-resize;
 }
 
 .cursor-default {
   cursor: default;
 }
 
-.cursor-nwse-resize {
-  cursor: nwse-resize;
-}
-
 .select-none {
   -webkit-user-select: none;
           user-select: none;
@@ -939,10 +937,18 @@ video {
   flex-direction: column;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .items-center {
   align-items: center;
 }
 
+.justify-center {
+  justify-content: center;
+}
+
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -963,14 +969,18 @@ video {
   overflow: hidden;
 }
 
-.overflow-scroll {
-  overflow: scroll;
-}
-
 .break-all {
   word-break: break-all;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -979,14 +989,19 @@ video {
   border-radius: 9999px;
 }
 
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
 .rounded-xl {
   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;
+}
+
 .rounded-l-xl {
   border-top-left-radius: 0.75rem;
   border-bottom-left-radius: 0.75rem;
@@ -997,6 +1012,10 @@ video {
   border-bottom-right-radius: 0.75rem;
 }
 
+.rounded-tl-lg {
+  border-top-left-radius: 0.5rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1005,10 +1024,6 @@ video {
   border-width: 2px;
 }
 
-.border-\[3px\] {
-  border-width: 3px;
-}
-
 .border-y-2 {
   border-top-width: 2px;
   border-bottom-width: 2px;
@@ -1026,9 +1041,9 @@ video {
   border-style: dotted;
 }
 
-.border-black {
+.border-gray-200 {
   --tw-border-opacity: 1;
-  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
 .border-slate-300 {
@@ -1036,6 +1051,11 @@ video {
   border-color: rgb(203 213 225 / var(--tw-border-opacity));
 }
 
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
 .border-red-600 {
   --tw-border-opacity: 1;
   border-color: rgb(220 38 38 / var(--tw-border-opacity));
@@ -1051,9 +1071,19 @@ video {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
-.border-Happy-Cool-Blue {
-  --tw-border-opacity: 1;
-  border-color: rgb(80 142 231 / var(--tw-border-opacity));
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.bg-neutral-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(212 212 212 / var(--tw-bg-opacity));
 }
 
 .bg-white {
@@ -1061,14 +1091,19 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-transparent {
-  background-color: transparent;
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
 
 .bg-light-white {
   background-color: rgba(255,255,255, 0.18);
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .bg-Warm-Blue {
   --tw-bg-opacity: 1;
   background-color: rgb(40 58 184 / var(--tw-bg-opacity));
@@ -1094,10 +1129,19 @@ 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));
 }
 
+.bg-gradient-to-br {
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
+
 .from-Retro-light-blue {
   --tw-gradient-from: #2de2e6;
   --tw-gradient-to: rgb(45 226 230 / 0);
@@ -1182,6 +1226,12 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-purple-600 {
+  --tw-gradient-from: #9333ea;
+  --tw-gradient-to: rgb(147 51 234 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .via-purple-500 {
   --tw-gradient-to: rgb(168 85 247 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), #a855f7, var(--tw-gradient-to);
@@ -1274,24 +1324,56 @@ video {
   --tw-gradient-to: #1565C0;
 }
 
-.p-5 {
-  padding: 1.25rem;
+.to-blue-500 {
+  --tw-gradient-to: #3b82f6;
 }
 
 .p-4 {
   padding: 1rem;
 }
 
-.p-1 {
-  padding: 0.25rem;
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-5 {
+  padding: 1.25rem;
+}
+
+.p-0\.5 {
+  padding: 0.125rem;
 }
 
 .p-0 {
   padding: 0px;
 }
 
-.p-2 {
-  padding: 0.5rem;
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
 }
 
 .px-2 {
@@ -1309,34 +1391,29 @@ video {
   padding-bottom: 0.75rem;
 }
 
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 }
 
-.px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
+.pb-3 {
+  padding-bottom: 0.75rem;
 }
 
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+.pl-8 {
+  padding-left: 2rem;
 }
 
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+.pl-9 {
+  padding-left: 2.25rem;
 }
 
-.px-\[0\.5px\] {
-  padding-left: 0.5px;
-  padding-right: 0.5px;
+.pr-3 {
+  padding-right: 0.75rem;
 }
 
-.py-\[0\.5px\] {
-  padding-top: 0.5px;
-  padding-bottom: 0.5px;
+.pl-7 {
+  padding-left: 1.75rem;
 }
 
 .pt-8 {
@@ -1347,22 +1424,10 @@ video {
   padding-left: 1.25rem;
 }
 
-.pr-3 {
-  padding-right: 0.75rem;
-}
-
 .pl-3 {
   padding-left: 0.75rem;
 }
 
-.pl-9 {
-  padding-left: 2.25rem;
-}
-
-.pb-3 {
-  padding-bottom: 0.75rem;
-}
-
 .pt-4 {
   padding-top: 1rem;
 }
@@ -1371,18 +1436,6 @@ video {
   padding-top: 0.5rem;
 }
 
-.pb-1 {
-  padding-bottom: 0.25rem;
-}
-
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-
-.pb-6 {
-  padding-bottom: 1.5rem;
-}
-
 .pb-0 {
   padding-bottom: 0px;
 }
@@ -1395,6 +1448,21 @@ video {
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -1410,19 +1478,13 @@ video {
   line-height: 2.25rem;
 }
 
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
 }
 
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
+.font-medium {
+  font-weight: 500;
 }
 
 .font-bold {
@@ -1437,14 +1499,14 @@ video {
   line-height: 1.25;
 }
 
-.text-white {
+.text-gray-500 {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
-.text-blue-50 {
+.text-gray-400 {
   --tw-text-opacity: 1;
-  color: rgb(239 246 255 / var(--tw-text-opacity));
+  color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
 .text-black {
@@ -1452,9 +1514,19 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
-.text-cream {
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-blue-50 {
   --tw-text-opacity: 1;
-  color: rgb(250 249 246 / var(--tw-text-opacity));
+  color: rgb(239 246 255 / var(--tw-text-opacity));
 }
 
 .text-selected-text {
@@ -1467,12 +1539,12 @@ video {
           text-decoration-line: underline;
 }
 
-.opacity-60 {
-  opacity: 0.6;
+.opacity-30 {
+  opacity: 0.3;
 }
 
-.opacity-50 {
-  opacity: 0.5;
+.opacity-60 {
+  opacity: 0.6;
 }
 
 .shadow-lg {
@@ -1515,20 +1587,8 @@ video {
   transition-duration: 150ms;
 }
 
-.delay-\[170ms\] {
-  transition-delay: 170ms;
-}
-
-.delay-\[270ms\] {
-  transition-delay: 270ms;
-}
-
-.delay-\[100ms\] {
-  transition-delay: 100ms;
-}
-
-.delay-\[200ms\] {
-  transition-delay: 200ms;
+.duration-75 {
+  transition-duration: 75ms;
 }
 
 .duration-300 {
@@ -1539,8 +1599,8 @@ video {
   transition-duration: 500ms;
 }
 
-.duration-150 {
-  transition-duration: 150ms;
+.ease-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 
 .placeholder\:italic::-webkit-input-placeholder {
@@ -1593,6 +1653,30 @@ video {
   border-color: rgb(74 222 128 / var(--tw-border-opacity));
 }
 
+.hover\:bg-gray-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
+.hover\:text-gray-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.hover\:opacity-70:hover {
+  opacity: 0.7;
+}
+
 .hover\:opacity-50:hover {
   opacity: 0.5;
 }
@@ -1602,33 +1686,99 @@ video {
   border-color: rgb(14 165 233 / var(--tw-border-opacity));
 }
 
+.focus\:bg-gray-700:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
 .focus\:from-fuchsia-200:focus {
   --tw-gradient-from: #f5d0fe;
   --tw-gradient-to: rgb(245 208 254 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.focus\:shadow-xl:focus {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .focus\:ring-1:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus\:ring-4:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-inset:focus {
+  --tw-ring-inset: inset;
+}
+
+.focus\:ring-indigo-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-sky-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-blue-300:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
+}
+
+.group:hover .group-hover\:bg-opacity-0 {
+  --tw-bg-opacity: 0;
+}
+
+.group:hover .group-hover\:from-purple-600 {
+  --tw-gradient-from: #9333ea;
+  --tw-gradient-to: rgb(147 51 234 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.group:hover .group-hover\:to-blue-500 {
+  --tw-gradient-to: #3b82f6;
+}
+
+.dark .dark\:border-gray-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity));
+}
+
 .dark .dark\:border-white {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.dark .dark\:bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:bg-stone-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(28 25 23 / var(--tw-bg-opacity));
@@ -1653,14 +1803,24 @@ video {
   --tw-gradient-to: #BDD4E7;
 }
 
+.dark .dark\:text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 .dark .dark\:text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-cream {
-  --tw-text-opacity: 1;
-  color: rgb(250 249 246 / var(--tw-text-opacity));
+.dark .dark\:hover\:bg-gray-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:focus\:ring-blue-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
 }
 
 @media (min-width: 640px) {