misc(web): refactor quiz-player and course-editor-page

Author: hoangphuc841

apps/web/src/components/ui/label.tsx

@@ -1,10 +1,10 @@
-"use client"
+'use client';
 
-import * as React from "react"
+import * as React from 'react';
 
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as LabelPrimitive from '@radix-ui/react-label';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 function Label({
   className,
@@ -14,12 +14,12 @@ function Label({
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Label }
+export { Label };

apps/web/src/components/ui/radio-group.tsx

@@ -1,9 +1,9 @@
-import * as React from "react"
+import * as React from 'react';
 
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { CircleIcon } from "lucide-react"
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { CircleIcon } from 'lucide-react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 function RadioGroup({
   className,
@@ -12,10 +12,10 @@ function RadioGroup({
   return (
     <RadioGroupPrimitive.Root
       data-slot="radio-group"
-      className={cn("grid gap-3", className)}
+      className={cn('grid gap-3', className)}
       {...props}
     />
-  )
+  );
 }
 
 function RadioGroupItem({
@@ -26,8 +26,8 @@ function RadioGroupItem({
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
       )}
       {...props}
     >
@@ -38,7 +38,7 @@ function RadioGroupItem({
         <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
-  )
+  );
 }
 
-export { RadioGroup, RadioGroupItem }
+export { RadioGroup, RadioGroupItem };

apps/web/src/features/quizzes/api/quizzes-api.ts

@@ -124,9 +124,12 @@ export const quizzesApi = {
     quizId: string,
     answers: Record<string, string>,
   ): Promise<QuizSubmission> => {
-    const response = await api.post<QuizSubmission>(`/quizzes/${quizId}/submit`, {
-      answers,
-    });
+    const response = await api.post<QuizSubmission>(
+      `/quizzes/${quizId}/submit`,
+      {
+        answers,
+      },
+    );
     return response.data;
   },