@@ -27,15 +27,22 @@ const Result: React.FC<LayoutProps> = ({
2727 { status }
2828 < div className = "flex justify-between" >
2929 < b > Execution duration (μs): </ b >
30- < 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 >
30+ < div
31+ className = {
32+ execDuration == null || execDuration === 0
33+ ? 'animate-pulse h w-48 bg-gray-800 rounded-lg text-white text-cente'
34+ : 'h w-48 bg-gray-800 rounded-lg text-white text-cente'
35+ }
36+ >
37+ { execDuration === 0 ? null : execDuration }
38+ </ div >
3139 </ div >
32- < OutputsComponent text = { "Message" } value = { message } />
33- < OutputsComponent text = { "Error" } value = { error } />
34- < OutputsComponent text = { "Stdout" } value = { stdout } />
35- < OutputsComponent text = { "Stderr" } value = { stderr } />
36-
37- < ScoresComponent qualityScore = { qualityScore } lintScore = { lintScore } />
40+ < OutputsComponent text = { 'Message' } value = { message } />
41+ < OutputsComponent text = { 'Error' } value = { error } />
42+ < OutputsComponent text = { 'Stdout' } value = { stdout } />
43+ < OutputsComponent text = { 'Stderr' } value = { stderr } />
3844
45+ < ScoresComponent qualityScore = { qualityScore } lintScore = { lintScore } />
3946 </ div >
4047 ) ;
4148} ;
@@ -45,64 +52,87 @@ interface OutputsComponentProps {
4552 value ?: string ;
4653}
4754
48- const OutputsComponent : React . FC < OutputsComponentProps > = ( { text, value} ) => {
49- return (
55+ const OutputsComponent : React . FC < OutputsComponentProps > = ( { text, value } ) => {
56+ return (
5057 < div >
5158 < b > { text } :</ b >
52- < 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 >
59+ < div
60+ className = {
61+ value == null
62+ ? 'animate-pulse h-10 w-full bg-gray-800 rounded-lg text-white'
63+ : 'h-10 w-full bg-gray-800 rounded-lg text-white'
64+ }
65+ >
66+ { value }
67+ </ div >
5368 </ div >
5469 ) ;
55- }
70+ } ;
5671
5772interface ScoresComponentProps {
58- qualityScore : number | undefined ,
59- lintScore : number | undefined ,
73+ qualityScore : number | undefined ;
74+ lintScore : number | undefined ;
6075}
6176
62- const ScoresComponent : React . FC < ScoresComponentProps > = ( { qualityScore, lintScore} ) => {
63-
64- return (
77+ const ScoresComponent : React . FC < ScoresComponentProps > = ( {
78+ qualityScore,
79+ lintScore,
80+ } ) => {
81+ return (
6582 < 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" >
6683 < div className = "rounded-t mb-0 px-0 border-0" >
6784 < div className = "flex flex-wrap items-center px-4 py-2" >
6885 < div className = "relative w-full max-w-full flex-grow flex-1" >
69- < h2 className = "font-semibold text-base text-gray-900 dark:text-gray-50" > Results</ h2 >
86+ < h2 className = "font-semibold text-base text-gray-900 dark:text-gray-50" >
87+ Results
88+ </ h2 >
7089 </ div >
7190 </ div >
7291 < div className = "block w-full overflow-x-auto" >
7392 < table className = "items-center w-full bg-transparent border-collapse" >
7493 < tbody >
75- < tr className = "text-gray-700 dark:text-gray-100" >
76- < 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 >
77- < td className = "border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4" >
78- < div className = "flex items-center" >
79- < span className = "mr-2" > { qualityScore } </ span >
80- < div className = "relative w-full" >
81- < div className = "overflow-hidden h-2 text-xs flex rounded bg-blue-200" >
82- < div style = { { width : `${ qualityScore } %` } } className = 'shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-600' />
94+ < tr className = "text-gray-700 dark:text-gray-100" >
95+ < th className = "border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left" >
96+ Quality score
97+ </ th >
98+ < td className = "border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4" >
99+ < div className = "flex items-center" >
100+ < span className = "mr-2" > { qualityScore } </ span >
101+ < div className = "relative w-full" >
102+ < div className = "overflow-hidden h-2 text-xs flex rounded bg-blue-200" >
103+ < div
104+ style = { { width : `${ qualityScore } %` } }
105+ className = "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-600"
106+ />
107+ </ div >
83108 </ div >
84109 </ div >
85- </ div >
86- </ td >
87- </ tr >
88- < tr className = "text-gray-700 dark:text-gray-100" >
89- < 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 >
90- < td className = "border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4" >
91- < div className = "flex items-center" >
92- < span className = "mr-2" > { lintScore } </ span >
93- < div className = "relative w-full" >
94- < div className = "overflow-hidden h-2 text-xs flex rounded bg-blue-200" >
95- < div style = { { width : `${ lintScore } %` } } className = 'shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500' />
110+ </ td >
111+ </ tr >
112+ < tr className = "text-gray-700 dark:text-gray-100" >
113+ < th className = "border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left" >
114+ Lint score
115+ </ th >
116+ < td className = "border-t-0 px-4 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4" >
117+ < div className = "flex items-center" >
118+ < span className = "mr-2" > { lintScore } </ span >
119+ < div className = "relative w-full" >
120+ < div className = "overflow-hidden h-2 text-xs flex rounded bg-blue-200" >
121+ < div
122+ style = { { width : `${ lintScore } %` } }
123+ className = "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500"
124+ />
125+ </ div >
96126 </ div >
97127 </ div >
98- </ div >
99- </ td >
100- </ tr >
128+ </ td >
129+ </ tr >
101130 </ tbody >
102131 </ table >
103132 </ div >
104133 </ div >
105- </ div > ) ;
106- }
134+ </ div >
135+ ) ;
136+ } ;
107137
108138export default Result ;
0 commit comments