@@ -162,22 +162,55 @@ export default function UnitConverter() {
162162 </ CardDescription >
163163 </ CardHeader >
164164 < CardContent >
165- < Tabs
166- value = { category }
167- onValueChange = { ( value ) => handleCategoryChange ( value as ConversionCategory ) }
168- className = "mb-4"
169- >
170- < TabsList className = "grid grid-cols-3 mb-4" >
171- < TabsTrigger value = "length" > Length</ TabsTrigger >
172- < TabsTrigger value = "weight" > Weight</ TabsTrigger >
173- < TabsTrigger value = "volume" > Volume</ TabsTrigger >
174- </ TabsList >
175- < TabsList className = "grid grid-cols-3" >
176- < TabsTrigger value = "temperature" > Temperature</ TabsTrigger >
177- < TabsTrigger value = "area" > Area</ TabsTrigger >
178- < TabsTrigger value = "time" > Time</ TabsTrigger >
179- </ TabsList >
180- </ Tabs >
165+ { /* Tabs for selecting conversion category */ }
166+ < div className = "mb-4" >
167+ < div className = "grid grid-cols-3 mb-4" >
168+ < button
169+ className = { `px-4 py-2 rounded ${ category === 'length' ? 'bg-primary text-white' : 'bg-background' } ` }
170+ onClick = { ( ) => handleCategoryChange ( 'length' ) }
171+ type = "button"
172+ >
173+ Length
174+ </ button >
175+ < button
176+ className = { `px-4 py-2 rounded ${ category === 'weight' ? 'bg-primary text-white' : 'bg-background' } ` }
177+ onClick = { ( ) => handleCategoryChange ( 'weight' ) }
178+ type = "button"
179+ >
180+ Weight
181+ </ button >
182+ < button
183+ className = { `px-4 py-2 rounded ${ category === 'volume' ? 'bg-primary text-white' : 'bg-background' } ` }
184+ onClick = { ( ) => handleCategoryChange ( 'volume' ) }
185+ type = "button"
186+ >
187+ Volume
188+ </ button >
189+ </ div >
190+ < div className = "grid grid-cols-3" >
191+ < button
192+ className = { `px-4 py-2 rounded ${ category === 'temperature' ? 'bg-primary text-white' : 'bg-background' } ` }
193+ onClick = { ( ) => handleCategoryChange ( 'temperature' ) }
194+ type = "button"
195+ >
196+ Temperature
197+ </ button >
198+ < button
199+ className = { `px-4 py-2 rounded ${ category === 'area' ? 'bg-primary text-white' : 'bg-background' } ` }
200+ onClick = { ( ) => handleCategoryChange ( 'area' ) }
201+ type = "button"
202+ >
203+ Area
204+ </ button >
205+ < button
206+ className = { `px-4 py-2 rounded ${ category === 'time' ? 'bg-primary text-white' : 'bg-background' } ` }
207+ onClick = { ( ) => handleCategoryChange ( 'time' ) }
208+ type = "button"
209+ >
210+ Time
211+ </ button >
212+ </ div >
213+ </ div >
181214
182215 < div className = "space-y-4" >
183216 < div className = "grid grid-cols-2 gap-4" >
0 commit comments