test page

betteridea-dev · Dec 5, 2023 · d9a18ce · d9a18ce
1 parent 2f4aadc
commit d9a18ce
Showing 1 changed file with 28 additions and 22 deletions.
diff --git a/src/pages/Test.tsx b/src/pages/Test.tsx
@@ -31,21 +31,23 @@ const Test = ({ setShowSidebar }: { setShowSidebar: any }) => {
       };
   return (
     <div>
-        <div className='flex flex-col w-fit'>
-            Select contracts to test
-        <select id="selectOption" className='p-2 text-base border rounded outline-none cursor-pointer bg-transparent hover:border-gray-600 focus:border-green-500 focus:ring focus:ring-green-100'>
-            <option value="option1">Option 1</option>
-            <option value="option2">Option 2</option>
-            <option value="option3">Option 3</option>
-        </select>
+        <div className='w-full flex justify-center'>
+        <div className='flex flex-col w-fit pt-24 pb-10'>
+            <span className=' text-sm text-[#B9B9B9]'></span>Select contracts to test
+            <select id="selectOption" className='p-2 text-base border rounded outline-none cursor-pointer bg-transparent hover:border-gray-600 focus:border-green-500 focus:ring focus:ring-green-100'>
+                <option value="option1">Option 1</option>
+                <option value="option2">Option 2</option>
+                <option value="option3">Option 3</option>
+            </select>
         </div>
-        <div className='flex'>
-            <div className="flex flex-1 w-fit  justify-center items-center h-screen">
+        </div>
+        <div className='grid grid-cols-2 '>
+        <div className="flex place-content-center w-full  flex-1 justify-center items-center h-fit">
           <form className="w-1/2 p-6 bg-transparent rounded-lg" onSubmit={handleSubmit}>
             <div className="mb-4">
-                <span className='font-bold'>Call a function</span>
+                <span className='font-semibold text-lg'>Call a function</span>
               <div className='flex gap-5 items-center'>
-              <label className="block text-gray-700 mb-2">Type of action:</label>
+              <label className="block  mb-2 text-sm text-[#B9B9B9] mt-4">Type of action:</label>
               <input
                 type="radio"
                 id="read"
@@ -72,7 +74,7 @@ const Test = ({ setShowSidebar }: { setShowSidebar: any }) => {
             </div>
 
             <div className="mb-4">
-              <label className="block text-gray-700  mb-2">Function Name:</label>
+              <label className="block   text-sm text-[#B9B9B9] mb-4">Function Name</label>
               <select
                 id="functionName"
                 name="functionName"
@@ -87,7 +89,7 @@ const Test = ({ setShowSidebar }: { setShowSidebar: any }) => {
             </div>
 
             <div className="mb-6">
-              <label className="block text-gray-700  mb-2">Input JSON:</label>
+              <label className="block text-sm text-[#B9B9B9] mb-4">Input JSON</label>
               <textarea
                 id="inputJson"
                 name="inputJson"
@@ -102,16 +104,20 @@ const Test = ({ setShowSidebar }: { setShowSidebar: any }) => {
               Get Result
             </button>
           </form>
-            </div>
-            <div className='flex-1 h-screen w-full justify-center items-center'>
-                <div className='h-full'>
-                <h1>Output</h1>
-                <form>
-                    <span>Result</span>
-                    <input type="text" className='bg-[rgba(61,73,71,0.50)]'/>
-                </form>
+        </div>
+        <div className='flex-1 place-content-center ml-32 pt-3 h-fit w-full flex flex-col first-letter'>
+                <h1 className=' text-lg font-semibold mb-16'>Output</h1>
+                <div className='flex flex-col'>
+                    <p className='text-sm text-[#B9B9B9] mb-4'>Result</p>
+                    <div className=' px-2 w-60 rounded bg-[rgba(61,73,71,0.50)] mb-8'>name</div>
                 </div>
-            </div>
+                <div className='flex flex-col'>
+                    <p className='text-sm text-[#B9B9B9] mb-4'>State</p>
+                    <div className='px-2 rounded bg-[rgba(61,73,71,0.50)] w-60 min-h-[53px] h-fit overflow-scroll pb-8 mb-8'>
+                        Json dataaslkdjasijdoaskdaskdaskdopkasopkdaskdpok
+                    </div>
+                </div>
+        </div>
         </div>
     </div>
   )