feat(ui): refactoring result component

Author: Mikadows

src/components/Benchmarks/Result.tsx

@@ -25,25 +25,84 @@ const Result: React.FC<LayoutProps> = ({
     <div>
       <b>Status: </b>
       {status}
-      <br />
-      <b>Message: </b>
-      {message}
-      <br />
-      <b>Error: </b>
-      {error}
-      <br />
-      <b>Stdout: </b>
-      <pre>{stdout}</pre>
-      <b>Stderr: </b>
-      <pre>{stderr}</pre>
-      <b>Execution duration (μs): </b>
-      <pre>{execDuration}</pre>
-      <b>Quality score: </b>
-      <pre>{qualityScore}</pre>
-      <b>Quality lint: </b>
-      <pre>{lintScore}</pre>
+      <div className="flex justify-between">
+        <b>Execution duration (μs): </b>
+        <div className={execDuration == null || execDuration === 0? "animate-pulse h w-48 bg-gray-800 rounded-lg text-white text-cente": "h w-48 bg-gray-800 rounded-lg text-white text-cente"} >{execDuration ===0 ? null : execDuration}</div>
+      </div>
+      <OutputsComponent text={"Message"} value={message} />
+      <OutputsComponent text={"Error"} value={error} />
+      <OutputsComponent text={"Stdout"} value={stdout} />
+      <OutputsComponent text={"Stderr"} value={stderr} />
+      
+      <ScoresComponent qualityScore={qualityScore} lintScore={lintScore}/>
+
     </div>
   );
 };
 
+interface OutputsComponentProps {
+  text?: string;
+  value?: string;
+}
+
+const OutputsComponent: React.FC<OutputsComponentProps> = ({text, value}) => {
+  return(
+    <div>
+      <b>{text}:</b>
+      <div className={value == null? "animate-pulse h-10 w-full bg-gray-800 rounded-lg text-white": "h-10 w-full bg-gray-800 rounded-lg text-white"} >{value}</div>
+    </div>
+  );
+}
+
+interface ScoresComponentProps {
+  qualityScore: number | undefined,
+  lintScore: number | undefined,
+}
+
+const ScoresComponent: React.FC<ScoresComponentProps> = ({qualityScore, lintScore}) => {
+
+  return(
+    <div className="relative flex flex-col min-w-0 mb-4 lg:mb-0 break-words bg-gray-50 dark:bg-gray-800 w-full shadow-lg rounded">
+      <div className="rounded-t mb-0 px-0 border-0">
+        <div className="flex flex-wrap items-center px-4 py-2">
+          <div className="relative w-full max-w-full flex-grow flex-1">
+            <h2 className="font-semibold text-base text-gray-900 dark:text-gray-50">Results</h2>
+          </div>
+        </div>
+        <div className="block w-full overflow-x-auto">
+          <table className="items-center w-full bg-transparent border-collapse">
+            <tbody>
+            <tr className="text-gray-700 dark:text-gray-100">
+              <th className="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">Quality score</th>
+              <td className="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
+                <div className="flex items-center">
+                  <span className="mr-2">{qualityScore}</span>
+                  <div className="relative w-full">
+                    <div className="overflow-hidden h-2 text-xs flex rounded bg-blue-200">
+                      <div style={{ width: `${qualityScore}%` }} className='shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-600'/>
+                    </div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+            <tr className="text-gray-700 dark:text-gray-100">
+              <th className="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left">Lint score</th>
+              <td className="border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
+                <div className="flex items-center">
+                  <span className="mr-2">{lintScore}</span>
+                  <div className="relative w-full">
+                    <div className="overflow-hidden h-2 text-xs flex rounded bg-blue-200">
+                      <div style={{ width: `${lintScore}%` }} className='shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500'/>
+                    </div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>);
+}
+
 export default Result;