added static/non-functional clear button to the step 2 select challenge

Author: ES-Legacy

components/ui/useCode/Challenge-FormField.tsx

@@ -12,8 +12,13 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select";
+import { Button } from "../button";
 
 export function ChallengeFormField(form: any) {
+    const handleClear = (field: any) => {
+        console.log("call clear");
+    };
+
     return (
         <FormField
             control={form.control}
@@ -22,28 +27,42 @@ export function ChallengeFormField(form: any) {
                 <FormItem className='mb-[1px]'>
                     <FormLabel>Challenge/Level</FormLabel>
                     <FormControl>
-                        <Select
-                            onValueChange={field.onChange}
-                            defaultValue={field.value}
-                        >
-                            <SelectTrigger className='w-[180px]'>
-                                <SelectValue placeholder='Select a Challenge' />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value='helloWorld'>
-                                    helloWorld
-                                </SelectItem>
-                                <SelectItem value='simpleDialog'>
-                                    simpleDialog
-                                </SelectItem>
-                                <SelectItem value='simpleNavBar'>
-                                    simpleNavBar
-                                </SelectItem>
-                                <SelectItem value='brightSunnyDay'>
-                                    brightSunnyDay
-                                </SelectItem>
-                            </SelectContent>
-                        </Select>
+                        <div className='flex'>
+                            <Select
+                                onValueChange={field.onChange}
+                                defaultValue={field.value}
+                            >
+                                <SelectTrigger className='w-[180px]'>
+                                    {field.value ? (
+                                        <SelectValue placeholder='Select a Challenge' />
+                                    ) : (
+                                        "Select a Challenge"
+                                    )}
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value='helloWorld'>
+                                        helloWorld
+                                    </SelectItem>
+                                    <SelectItem value='simpleDialog'>
+                                        simpleDialog
+                                    </SelectItem>
+                                    <SelectItem value='simpleNavBar'>
+                                        simpleNavBar
+                                    </SelectItem>
+                                    <SelectItem value='brightSunnyDay'>
+                                        brightSunnyDay
+                                    </SelectItem>
+                                </SelectContent>
+                            </Select>
+                            <Button
+                                type='button'
+                                variant='outline'
+                                className='inline-block italic'
+                                onClick={() => handleClear(field)}
+                            >
+                                Clear
+                            </Button>
+                        </div>
                     </FormControl>
                     <FormMessage />
                 </FormItem>

components/ui/useCode/StepTwo.tsx

@@ -59,6 +59,7 @@ export function StepTwo() {
                     className='w-full space-y-8 p-5'
                 >
                     <ChallengeFormField />
+
                     <Button
                         variant='ghost'
                         className='self float-left font-semibold text-muted-foreground'