@@ -11,10 +11,22 @@ import TestCases from "@/components/TestCases/TestCases";
1111
1212export default function UIPage ( ) {
1313 const [ selectedLanguage , setSelectedLanguage ] = useState ( "C++" ) ;
14- const [ showModal , setShowModal ] = useState < "default" | "green" | "red" | "yellow" | null > ( null ) ;
14+ const [ showModal , setShowModal ] = useState <
15+ "default" | "green" | "red" | "yellow" | null
16+ > ( null ) ;
1517 const [ questionID , setQuestionID ] = useState < number > ( 1 ) ;
1618
17- const languages = [ "C++" , "C" , "C#" , "Java" , "Python3" , "PHP" , "Rust" , "Racket" , "Ruby" ] ;
19+ const languages = [
20+ "C++" ,
21+ "C" ,
22+ "C#" ,
23+ "Java" ,
24+ "Python3" ,
25+ "PHP" ,
26+ "Rust" ,
27+ "Racket" ,
28+ "Ruby" ,
29+ ] ;
1830
1931 const questions = [
2032 {
@@ -49,10 +61,38 @@ export default function UIPage() {
4961 } ;
5062
5163 const defaultResults : TestCase [ ] = [
52- { id : 1 , status : "Passed" , input : "2 3" , output : "5" , expectedOutput : "5" , isHidden : false } ,
53- { id : 2 , status : "Failed" , input : "10 4" , output : "15" , expectedOutput : "14" , isHidden : false } ,
54- { id : 4 , status : "Passed" , input : "10 5" , output : "20" , expectedOutput : "20" , isHidden : false } ,
55- { id : 3 , status : "Passed" , input : "7 8" , output : "15" , expectedOutput : "15" , isHidden : true } ,
64+ {
65+ id : 1 ,
66+ status : "Passed" ,
67+ input : "2 3" ,
68+ output : "5" ,
69+ expectedOutput : "5" ,
70+ isHidden : false ,
71+ } ,
72+ {
73+ id : 2 ,
74+ status : "Failed" ,
75+ input : "10 4" ,
76+ output : "15" ,
77+ expectedOutput : "14" ,
78+ isHidden : false ,
79+ } ,
80+ {
81+ id : 4 ,
82+ status : "Passed" ,
83+ input : "10 5" ,
84+ output : "20" ,
85+ expectedOutput : "20" ,
86+ isHidden : false ,
87+ } ,
88+ {
89+ id : 3 ,
90+ status : "Passed" ,
91+ input : "7 8" ,
92+ output : "15" ,
93+ expectedOutput : "15" ,
94+ isHidden : true ,
95+ } ,
5696 ] ;
5797
5898 const defaultCompilerDetails = {
@@ -74,15 +114,12 @@ export default function UIPage() {
74114
75115 { /*Right: Editor and Test case */ }
76116 < div className = "flex flex-col space-y-6 mt-0 transform -translate-x-6 translate-y-12" >
77-
78-
79117 < div className = "bg-[#131414]" >
80118 < Editor
81119 languages = { languages }
82120 selectedLanguage = { selectedLanguage }
83121 onLanguageChange = { setSelectedLanguage }
84122 round = "Round 1"
85- timer = "00:11:52"
86123 />
87124 </ div >
88125
@@ -97,39 +134,48 @@ export default function UIPage() {
97134
98135 { /* Modal showcase */ }
99136 < div className = "mt-12" >
100- { ( [ "default" , "green" , "destructive" , "secondary" ] as const ) . map ( ( variant ) => {
101- const modalVariant : "default" | "green" | "red" | "yellow" =
102- variant === "destructive" ? "red" :
103- variant === "secondary" ? "yellow" :
104- variant ;
105- const buttonVariant :
106- | "green" | "secondary" | "destructive" | "link"
107- | "outline" | "ghost" | "run" =
108- variant === "default" ? "outline" : variant ;
109- const displayName = modalVariant . charAt ( 0 ) . toUpperCase ( ) + modalVariant . slice ( 1 ) ;
110- return (
111- < div key = { variant } className = "mb-6" >
112- < div className = "flex gap-2 mb-2" >
113- < Button
114- variant = { buttonVariant }
115- onClick = { ( ) => setShowModal ( modalVariant ) }
116- >
117- Show { displayName } Modal
118- </ Button >
137+ { ( [ "default" , "green" , "destructive" , "secondary" ] as const ) . map (
138+ ( variant ) => {
139+ const modalVariant : "default" | "green" | "red" | "yellow" =
140+ variant === "destructive"
141+ ? "red"
142+ : variant === "secondary"
143+ ? "yellow"
144+ : variant ;
145+ const buttonVariant :
146+ | "green"
147+ | "secondary"
148+ | "destructive"
149+ | "link"
150+ | "outline"
151+ | "ghost"
152+ | "run" = variant === "default" ? "outline" : variant ;
153+ const displayName =
154+ modalVariant . charAt ( 0 ) . toUpperCase ( ) + modalVariant . slice ( 1 ) ;
155+ return (
156+ < div key = { variant } className = "mb-6" >
157+ < div className = "flex gap-2 mb-2" >
158+ < Button
159+ variant = { buttonVariant }
160+ onClick = { ( ) => setShowModal ( modalVariant ) }
161+ >
162+ Show { displayName } Modal
163+ </ Button >
164+ </ div >
165+ { showModal === modalVariant && (
166+ < Modal
167+ title = { `Sample ${ displayName } Modal` }
168+ message = { `This is a demonstration of the ${ modalVariant } Modal variant.` }
169+ variant = { modalVariant }
170+ onClose = { ( ) => setShowModal ( null ) }
171+ >
172+ < Button variant = { buttonVariant } > Nested Button</ Button >
173+ </ Modal >
174+ ) }
119175 </ div >
120- { showModal === modalVariant && (
121- < Modal
122- title = { `Sample ${ displayName } Modal` }
123- message = { `This is a demonstration of the ${ modalVariant } Modal variant.` }
124- variant = { modalVariant }
125- onClose = { ( ) => setShowModal ( null ) }
126- >
127- < Button variant = { buttonVariant } > Nested Button</ Button >
128- </ Modal >
129- ) }
130- </ div >
131- ) ;
132- } ) }
176+ ) ;
177+ }
178+ ) }
133179 </ div >
134180 </ div >
135181 ) ;
0 commit comments