feat: improving pages admin routes

package-lock.json

@@ -18,6 +18,7 @@
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-popover": "^1.1.1",
+        "@radix-ui/react-radio-group": "^1.2.1",
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
@@ -1804,6 +1805,81 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.2.1.tgz",
+      "integrity": "sha512-kdbv54g4vfRjja9DNWPMxKvXblzqbpEC8kspEkZ6dVP7kQksGCn+iZHkcCz2nb00+lPdRvxrqy4WrvvV1cNqrQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-roving-focus": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz",
+      "integrity": "sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.1.tgz",

package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.1",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",

src/api/categories.ts

+import { api } from '@/lib/axios'
+
+export type CategoriesProps = {
+  id: string
+  name: string
+}
+
+export async function getCategories() {
+  const categories = await api.get<CategoriesProps[]>('/categories')
+  return categories
+}

src/app/(home)/page.tsx

@@ -29,7 +29,8 @@ export default function Home() {
               label="O que você quer aprender hoje?"
               variant="standard"
               type="text"
-              className="w-full #fafafa"
+              className="w-full"
+              themeColor="#fafafa"
             />
             <Search size={24} />
           </div>

src/app/admin/area/[id]/page.tsx

@@ -3,6 +3,7 @@
 import { AreasProps, deleteArea, editArea, getAreasId } from '@/api/areas'
 import BreadcrumbComponent from '@/components/breadcrumb-component'
 import InputFile from '@/components/input-file'
+import { LoadingSpinIcon } from '@/components/loading-spin-icon'
 import ModalDialog from '@/components/modal-dialog'
 import { AlertDialog, AlertDialogTrigger } from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
@@ -24,8 +25,8 @@ export default function AreaId() {
 
   const queryClient = useQueryClient()
 
-  const { data: area, isLoading, isPending } = useQuery({
-    queryKey: ['area'],
+  const { data: area, isLoading } = useQuery({
+    queryKey: ['area', params.id],
     queryFn: () => getAreasId(params.id),
     enabled: !!params.id,
   })
@@ -60,14 +61,13 @@ export default function AreaId() {
     mutationDelete.mutate(params.id)
   }
 
-
-  if(isLoading) {
-    console.log('isloading')
-    return <span>isLoading TEST...</span>
-  }
-  if(isPending) {
-    console.log('isPeding')
-    return <span>isPending TEST...</span>
+  if (isLoading) {
+    return (
+      <div className="flex w-full h-[500px] items-center justify-center">
+        <LoadingSpinIcon />
+        <span>Loading...</span>
+      </div>
+    )
   }
 
   return (
@@ -76,7 +76,13 @@ export default function AreaId() {
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="flex items-center gap-6">
           <h1 className="text-3xl font-bold">Editar Área</h1>
-          <Button variant="secondary" type='submit' className="uppercase rounded-sm">
+          <Button
+            variant="secondary"
+            type="submit"
+            className="uppercase rounded-sm"
+            disabled={isLoading}
+          >
+            {mutationEdit.isPending && <LoadingSpinIcon />}
             Salvar e publicar
           </Button>
           <AlertDialog>
@@ -84,9 +90,9 @@ export default function AreaId() {
               <AlertDialogTrigger
                 className="uppercase flex items-center gap-2 text-orange-100 border-none hover:bg-orange-100/10 hover:text-orange-100 h-10 px-5 rounded-sm"
                 type="button"
-                >
+              >
                 <span>Apagar área</span>
-              <Trash />
+                <Trash />
               </AlertDialogTrigger>
               <ModalDialog
                 title="Tem certeza que deseja deletar a área?"
@@ -97,11 +103,11 @@ export default function AreaId() {
           </AlertDialog>
         </div>
         <div className="w-full mt-16">
-          <Input 
-            label="Nome da área" 
-            className="border-green-400" 
+          <Input
+            label="Nome da área"
+            className="border-green-400"
             defaultValue={area?.data.name}
-            {...register('name')} 
+            {...register('name')}
             type="text"
           />
 

src/app/admin/area/page.tsx

@@ -2,6 +2,7 @@
 
 import { AreasProps, createAreas } from '@/api/areas'
 import InputFile from '@/components/input-file'
+import { LoadingSpinIcon } from '@/components/loading-spin-icon'
 import { StyledInputs } from '@/components/mui/styled-inputs'
 import { Button } from '@/components/ui/button'
 import { TextField } from '@mui/material'
@@ -39,6 +40,7 @@ export default function Area() {
         <div className="flex items-center gap-6">
           <h1 className="text-3xl font-bold">Criar Área</h1>
           <Button variant="secondary" className="uppercase rounded-sm">
+            {mutation.isPending && <LoadingSpinIcon />}
             Salvar e publicar
           </Button>
         </div>

src/app/admin/curso/[id]/page.tsx

@@ -29,7 +29,7 @@ export default function EditCourse() {
     <section className="container py-10">
       <form>
         <div className="flex items-center gap-6">
-          <h1 className="text-green-700 text-3xl font-bold">Editar curso</h1>
+          <h1 className="text-3xl font-bold">Editar curso</h1>
           {/* <Button variant="third" className="uppercase">
             Salvar como rascunho
           </Button> */}
@@ -50,9 +50,20 @@ export default function EditCourse() {
               Informações sobre o curso
             </h6>
 
-            <InputMui label="Nome do curso" variant="standard" type="text" />
+            <InputMui
+              label="Nome do curso"
+              variant="standard"
+              type="text"
+              themeColor="#26AAA7"
+            />
 
-            <InputMui type="text" variant="standard" label="Área" select>
+            <InputMui
+              type="text"
+              variant="standard"
+              label="Área"
+              select
+              themeColor="#26AAA7"
+            >
               {options.map((option) => (
                 <MenuItem key={option.value} value={option.value}>
                   {option.label}
@@ -66,12 +77,14 @@ export default function EditCourse() {
               type="text"
               multiline
               rows={4}
+              themeColor="#26AAA7"
             />
 
             <InputMui
               label="Nome dos(as) Professores(as):"
               variant="standard"
               type="text"
+              themeColor="#26AAA7"
             />
 
             <div className="flex justify-between flex-wrap gap-6">
@@ -119,7 +132,7 @@ export default function EditCourse() {
                       <Button
                         variant={'ghost'}
                         className={cn(
-                          'lg:w-[450px] justify-start text-left font-normal border-b rounded-none pl-0',
+                          'lg:w-[450px] justify-start text-left font-normal border-b rounded-none pl-0 border-green-400',
                           !date && 'text-muted-foreground',
                         )}
                       >
@@ -159,7 +172,7 @@ export default function EditCourse() {
                       <Button
                         variant={'ghost'}
                         className={cn(
-                          'lg:w-[450px] justify-start text-left font-normal border-b rounded-none pl-0',
+                          'lg:w-[450px] justify-start text-left font-normal border-b rounded-none pl-0 border-green-400',
                           !date && 'text-muted-foreground',
                         )}
                       >
@@ -189,7 +202,12 @@ export default function EditCourse() {
             <h6 className="text-xl text-purple-100 mb-4">Módulos</h6>
 
             <div className="flex flex-col p-4 gap-6 border border-gray-100">
-              <InputMui label="Título" variant="standard" type="text" />
+              <InputMui
+                label="Título"
+                variant="standard"
+                type="text"
+                themeColor="#26AAA7"
+              />
 
               <InputMui
                 label="Descrição"
@@ -197,6 +215,7 @@ export default function EditCourse() {
                 type="text"
                 multiline
                 rows={4}
+                themeColor="#26AAA7"
               />
             </div>
 
@@ -207,6 +226,7 @@ export default function EditCourse() {
               <PlusIcon size={20} /> <span>Adicionar Módulo</span>
             </Button>
           </div>
+
           <div className="w-[380px] pl-6 flex flex-col gap-4">
             <h6 className="text-xl text-purple-100 mb-4">
               Qual o público alvo?

src/app/admin/page.tsx

@@ -115,6 +115,7 @@ export default function Admin() {
               type="text"
               variant="standard"
               className="w-full"
+              themeColor="#fafafa"
             />
             <Search size={24} className="-ml-6" />
           </div>

src/components/loading-spin-icon.tsx

+import { cn } from '@/lib/utils'
+
+type SpinProps = {
+  className?: React.HTMLProps<HTMLElement>['className']
+}
+
+export function LoadingSpinIcon({ className }: SpinProps) {
+  return (
+    <svg
+      className={cn('animate-spin -ml-1 mr-3 h-5 w-5 text-white', className)}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      ></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  )
+}

src/components/modal-dialog.tsx

 import {
-  AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
@@ -7,6 +6,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from './ui/alert-dialog'
+import { Button } from './ui/button'
 
 type AlertDialogProps = {
   title: string
@@ -27,7 +27,13 @@ export default function ModalDialog({
       </AlertDialogHeader>
       <AlertDialogFooter>
         <AlertDialogCancel>Cancelar</AlertDialogCancel>
-        <AlertDialogAction onClick={handleClick}>Continue</AlertDialogAction>
+        <Button
+          onClick={handleClick}
+          variant="outline"
+          className="text-gray-50 bg-red-500 hover:bg-red-500/80"
+        >
+          Continue
+        </Button>
       </AlertDialogFooter>
     </AlertDialogContent>
   )

src/components/mui/inputs.tsx

@@ -7,6 +7,7 @@ import { ReactNode } from 'react'
 type InputMuiProps = TextFieldProps & {
   label: string
   variant: 'standard' | 'filled' | 'outlined'
+  themeColor?: string
   children?: ReactNode
 }
 
@@ -14,11 +15,12 @@ export function InputMui({
   label,
   variant,
   children,
+  themeColor = '#fafafa',
   ...props
 }: InputMuiProps) {
   const themeConfig = useThemeClient()
 
-  const color = themeConfig === 'dark' ? '#fafafa' : '#3C3C3C'
+  const color = themeConfig === 'dark' ? themeColor : '#3C3C3C'
 
   return (
     <TextField
@@ -44,10 +46,10 @@ export function InputMui({
           color: `${color}`,
         },
         '& input': {
-          color: `${color}`,
+          color: `#fafafa`,
         },
         '& .MuiInputBase-input': {
-          color: `${color}`,
+          color: `#fafafa`,
         },
         '& .MuiInput-underline:before': {
           borderBottomColor: color,

src/components/ui/radio-group.tsx

+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }