feat: active links in categories page and adjustments forms in admin pages

src/app/(home)/page.tsx

@@ -9,7 +9,9 @@ import { Differences } from '@/components/differences'
 import { InputMui } from '@/components/mui/inputs'
 import { NavLinkCategory } from '@/components/nav-link-category'
 import { SignUp } from '@/components/sign-up'
+import { SkeletonSerachParams } from '@/components/skeleton-serach-params'
 import { Button } from '@/components/ui/button'
+import { Suspense } from 'react'
 
 export default function Home() {
   return (
@@ -19,7 +21,9 @@ export default function Home() {
         <Banner />
 
         <div className="container flex flex-col">
-          <NavLinkCategory />
+          <Suspense fallback={<SkeletonSerachParams />}>
+            <NavLinkCategory />
+          </Suspense>
           <div className="flex justify-center items-center w-full md:w-1/2 mx-auto mb-8">
             <InputMui
               label="O que você quer aprender hoje?"

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

 'use client'
 
-import { StyledInputs } from '@/components/mui/styled-inputs'
+import { InputMui } from '@/components/mui/inputs'
 import { Button } from '@/components/ui/button'
 import { Calendar } from '@/components/ui/calendar'
 import { Checkbox } from '@/components/ui/checkbox'
@@ -12,14 +12,14 @@ import {
 } from '@/components/ui/popover'
 import { Separator } from '@/components/ui/separator'
 import { cn } from '@/lib/utils'
-import { Autocomplete, TextField } from '@mui/material'
+import { MenuItem } from '@mui/material'
 import { format } from 'date-fns'
 import { CalendarIcon, PlusIcon, Trash } from 'lucide-react'
 import { useState } from 'react'
 
 const options = [
-  { label: 'The Godfather', id: 1 },
-  { label: 'Pulp Fiction', id: 2 },
+  { label: 'The Godfather', value: 1 },
+  { label: 'Pulp Fiction', value: 2 },
 ]
 
 export default function EditCourse() {
@@ -50,35 +50,28 @@ export default function EditCourse() {
               Informações sobre o curso
             </h6>
 
-            <TextField
-              label="Nome do curso"
-              variant="standard"
-              type="text"
-              sx={StyledInputs({ color: '#26AAA7' })}
-            />
+            <InputMui label="Nome do curso" variant="standard" type="text" />
 
-            <Autocomplete
-              options={options}
-              sx={StyledInputs({ color: '#26AAA7' })}
-              renderInput={(params) => (
-                <TextField {...params} label="Área" variant="standard" />
-              )}
-            />
+            <InputMui type="text" variant="standard" label="Área" select>
+              {options.map((option) => (
+                <MenuItem key={option.value} value={option.value}>
+                  {option.label}
+                </MenuItem>
+              ))}
+            </InputMui>
 
-            <TextField
+            <InputMui
               label="Descrição do Curso"
               variant="standard"
               type="text"
               multiline
               rows={4}
-              sx={StyledInputs({ color: '#26AAA7' })}
             />
 
-            <TextField
+            <InputMui
               label="Nome dos(as) Professores(as):"
               variant="standard"
               type="text"
-              sx={StyledInputs({ color: '#26AAA7' })}
             />
 
             <div className="flex justify-between flex-wrap gap-6">
@@ -195,21 +188,15 @@ 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-green-900">
-              <TextField
-                label="Título"
-                variant="standard"
-                type="text"
-                sx={StyledInputs({ color: '#26AAA7' })}
-              />
+            <div className="flex flex-col p-4 gap-6 border border-gray-100">
+              <InputMui label="Título" variant="standard" type="text" />
 
-              <TextField
+              <InputMui
                 label="Descrição"
                 variant="standard"
                 type="text"
                 multiline
                 rows={4}
-                sx={StyledInputs({ color: '#26AAA7' })}
               />
             </div>
 

src/app/admin/curso/page.tsx

 'use client'
 
-import { StyledInputs } from '@/components/mui/styled-inputs'
+import { InputMui } from '@/components/mui/inputs'
 import { Button } from '@/components/ui/button'
 import { Calendar } from '@/components/ui/calendar'
 import { Checkbox } from '@/components/ui/checkbox'
@@ -12,14 +12,14 @@ import {
 } from '@/components/ui/popover'
 import { Separator } from '@/components/ui/separator'
 import { cn } from '@/lib/utils'
-import { Autocomplete, TextField } from '@mui/material'
+import { MenuItem } from '@mui/material'
 import { format } from 'date-fns'
 import { CalendarIcon, PlusIcon, Trash } from 'lucide-react'
 import { useState } from 'react'
 
 const options = [
-  { label: 'The Godfather', id: 1 },
-  { label: 'Pulp Fiction', id: 2 },
+  { label: 'The Godfather', value: 1 },
+  { label: 'Pulp Fiction', value: 2 },
 ]
 
 export default function Curso() {
@@ -50,35 +50,28 @@ export default function Curso() {
               Informações sobre o curso
             </h6>
 
-            <TextField
-              label="Nome do curso"
-              variant="standard"
-              type="text"
-              sx={StyledInputs({ color: '#26AAA7' })}
-            />
+            <InputMui label="Nome do curso" variant="standard" type="text" />
 
-            <Autocomplete
-              options={options}
-              sx={StyledInputs({ color: '#26AAA7' })}
-              renderInput={(params) => (
-                <TextField {...params} label="Área" variant="standard" />
-              )}
-            />
+            <InputMui type="text" variant="standard" label="Área" select>
+              {options.map((option) => (
+                <MenuItem key={option.value} value={option.value}>
+                  {option.label}
+                </MenuItem>
+              ))}
+            </InputMui>
 
-            <TextField
+            <InputMui
               label="Descrição do Curso"
               variant="standard"
               type="text"
               multiline
               rows={4}
-              sx={StyledInputs({ color: '#26AAA7' })}
             />
 
-            <TextField
+            <InputMui
               label="Nome dos(as) Professores(as):"
               variant="standard"
               type="text"
-              sx={StyledInputs({ color: '#26AAA7' })}
             />
 
             <div className="flex justify-between flex-wrap gap-6">
@@ -98,7 +91,6 @@ export default function Curso() {
                 <span className="mt-4">Dimensões recomendadas: </span>
                 <span>Formatos aceitos: .png, .jpg</span>
                 <Button
-                  asChild
                   variant="third"
                   className="border border-dotted border-green-400 rounded-sm mt-6 mx-auto md:w-[436px]"
                 >
@@ -196,21 +188,15 @@ export default function Curso() {
 
             <h6 className="text-xl text-purple-100 mb-4">Módulos</h6>
 
-            <div className="flex flex-col p-4 gap-6 border border-green-900">
-              <TextField
-                label="Título"
-                variant="standard"
-                type="text"
-                sx={StyledInputs({ color: '#26AAA7' })}
-              />
+            <div className="flex flex-col p-4 gap-6 border border-gray-100">
+              <InputMui label="Título" variant="standard" type="text" />
 
-              <TextField
+              <InputMui
                 label="Descrição"
                 variant="standard"
                 type="text"
                 multiline
                 rows={4}
-                sx={StyledInputs({ color: '#26AAA7' })}
               />
             </div>
 

src/app/admin/page.tsx

@@ -103,10 +103,10 @@ export default function Admin() {
             {CoursesCard.map((course) => (
               <Link
                 key={course.id}
-                className="lowercase"
+                className="lowercase scale-100 hover:scale-105 duration-300"
                 href={`admin/curso/${course.id}`}
               >
-                <div className={`bg-gray-100 pb-4 rounded-lg max-w-[163px]`}>
+                <div className="border border-gray-100 pb-4 rounded-lg overflow-hidden">
                   <Card.Image image={course.image.src} width={240} height={320}>
                     <Card.Title title={course.title} />
                   </Card.Image>

src/app/empresas/page.tsx

@@ -6,14 +6,18 @@ import { NavLinkCategory } from '@/components/nav-link-category'
 import { PaginationComponent } from '@/components/pagination-component'
 import SearchFilter from '@/components/search-filter'
 import { SignUp } from '@/components/sign-up'
+import { SkeletonSerachParams } from '@/components/skeleton-serach-params'
 import { CoursesCard } from '@/utils/courses-array'
 import { Calendar, Clock4, User } from 'lucide-react'
+import { Suspense } from 'react'
 
 export default function Companies() {
   return (
     <main>
       <BannerCategory title="Empresas" />
-      <NavLinkCategory />
+      <Suspense fallback={<SkeletonSerachParams />}>
+        <NavLinkCategory />
+      </Suspense>
       <SearchFilter />
       <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 grid-rows-3 lg:grid-rows-2 gap-4 md:gap-6 p-6">
         {CoursesCard.map((course) => (

src/app/estudantes/page.tsx

@@ -6,14 +6,18 @@ import { NavLinkCategory } from '@/components/nav-link-category'
 import { PaginationComponent } from '@/components/pagination-component'
 import SearchFilter from '@/components/search-filter'
 import { SignUp } from '@/components/sign-up'
+import { SkeletonSerachParams } from '@/components/skeleton-serach-params'
 import { CoursesCard } from '@/utils/courses-array'
 import { Calendar, Clock4, User } from 'lucide-react'
+import { Suspense } from 'react'
 
 export default function Students() {
   return (
     <main>
       <BannerCategory title="Estudantes" />
-      <NavLinkCategory />
+      <Suspense fallback={<SkeletonSerachParams />}>
+        <NavLinkCategory />
+      </Suspense>
       <SearchFilter />
       <div className="grid rounded-none grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 grid-rows-3 lg:grid-rows-2 gap-4 md:gap-6 p-6">
         {CoursesCard.map((course) => (

src/app/profissionais/page.tsx

@@ -6,14 +6,18 @@ import { NavLinkCategory } from '@/components/nav-link-category'
 import { PaginationComponent } from '@/components/pagination-component'
 import SearchFilter from '@/components/search-filter'
 import { SignUp } from '@/components/sign-up'
+import { SkeletonSerachParams } from '@/components/skeleton-serach-params'
 import { CoursesCard } from '@/utils/courses-array'
 import { Calendar, Clock4, User } from 'lucide-react'
+import { Suspense } from 'react'
 
 export default function Professionals() {
   return (
     <main>
       <BannerCategory title="Profissionais" />
-      <NavLinkCategory />
+      <Suspense fallback={<SkeletonSerachParams />}>
+        <NavLinkCategory />
+      </Suspense>
       <SearchFilter />
       <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 grid-rows-3 lg:grid-rows-2 gap-4 md:gap-6 p-6">
         {CoursesCard.map((course) => (

src/components/card/card-title.tsx

 type CardTitleProps = {
   title: string
+  className?: React.HTMLProps<HTMLElement>['className']
 }
 
-export function CardTitle({ title }: CardTitleProps) {
+export function CardTitle({ title, className }: CardTitleProps) {
   return (
-    <span className="text-center text-lg text-gray-50 lg:text-2xl px-1 pb-6">
+    <span
+      className={`text-center text-lg text-gray-50 lg:text-2xl px-1 pb-6 ${className}`}
+    >
       {title}
     </span>
   )

src/components/course-category.tsx

@@ -10,7 +10,7 @@ export function CourseCategory() {
     <section className="hidden md:block">
       <div className="h-auto flex justify-center items-center my-20 px-6">
         <ul className="flex justify-center items-center gap-4 text-gray-50">
-          <li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-900 rounded-lg pb-4 transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow-xl hover:drop-shadow-2xl">
+          <li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-900 rounded-lg pb-4 scale-95 hover:scale-100 duration-300 drop-shadow-xl hover:drop-shadow-2xl">
             <Link href="#" className="flex flex-col gap-4 p-2">
               <Image
                 src={ImageFast}
@@ -25,7 +25,7 @@ export function CourseCategory() {
               </p>
             </Link>
           </li>
-          <li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-900  rounded-lg pb-4 transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow-xl hover:drop-shadow-2xl">
+          <li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-900 rounded-lg pb-4 scale-95 hover:scale-100 duration-300 drop-shadow-xl hover:drop-shadow-2xl">
             <Link href="#" className="flex flex-col gap-4 p-2">
               <Image
                 src={ImageDeepen}
@@ -40,7 +40,7 @@ export function CourseCategory() {
               </p>
             </Link>
           </li>
-          <li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-900  rounded-lg pb-4 transform scale-95 hover:scale-100 transition-transform duration-300 drop-shadow-xl hover:drop-shadow-2xl">
+          <li className="max-w-[472px] bg-gradient-to-r from-green-700 to-green-900 rounded-lg pb-4 scale-95 hover:scale-100 duration-300 drop-shadow-xl hover:drop-shadow-2xl">
             <Link href="#" className="flex flex-col gap-4 p-2">
               <Image
                 src={ImageCorporate}

src/components/logo.tsx

 import { ComponentProps } from 'react'
 
 function LogoComponent(props: ComponentProps<'svg'>) {
-  console.log('props', props)
   return (
     <svg
       width={115}

src/components/nav-link-category.tsx

-import Link from 'next/link'
-import { Button } from './ui/button'
+import { NavLinkSearchParams } from './nav-link-search-params'
 
 export function NavLinkCategory() {
   return (
-    <div className="container my-10">
+    <nav className="container my-10">
       <ul className="flex flex-wrap justify-center items-center gap-8">
         <li>
-          <Button asChild className="uppercase">
-            <Link href="#">Tecnologia</Link>
-          </Button>
+          <NavLinkSearchParams
+            variant="default"
+            href="tecnologia"
+            className="uppercase"
+          >
+            Tecnologia
+          </NavLinkSearchParams>
         </li>
         <li>
-          <Button asChild className="uppercase">
-            <Link href="#">Negócios</Link>
-          </Button>
+          <NavLinkSearchParams
+            variant="default"
+            href="negocios"
+            className="uppercase"
+          >
+            Negócios
+          </NavLinkSearchParams>
         </li>
         <li>
-          <Button asChild className="uppercase">
-            <Link href="#">Saúde</Link>
-          </Button>
+          <NavLinkSearchParams
+            variant="default"
+            href="saude"
+            className="uppercase"
+          >
+            Saúde
+          </NavLinkSearchParams>
         </li>
         <li>
-          <Button asChild className="uppercase">
-            <Link href="#">Educação</Link>
-          </Button>
+          <NavLinkSearchParams
+            variant="default"
+            href="educacao"
+            className="uppercase"
+          >
+            Educação
+          </NavLinkSearchParams>
         </li>
         <li>
-          <Button asChild className="uppercase">
-            <Link href="#">Comunicação</Link>
-          </Button>
+          <NavLinkSearchParams
+            variant="default"
+            href="comunicacao"
+            className="uppercase"
+          >
+            Comunicação
+          </NavLinkSearchParams>
         </li>
         <li>
-          <Button asChild className="uppercase">
-            <Link href="#">Teologia</Link>
-          </Button>
+          <NavLinkSearchParams
+            variant="default"
+            href="teologia"
+            className="uppercase"
+          >
+            Teologia
+          </NavLinkSearchParams>
         </li>
       </ul>
-    </div>
+    </nav>
   )
 }

src/components/nav-link-search-params.tsx

+'use client'
+
+import Link, { LinkProps } from 'next/link'
+
+import { useSearchParams } from 'next/navigation'
+import { Button } from './ui/button'
+
+interface NavLinkProps extends LinkProps {
+  variant:
+    | 'default'
+    | 'secondary'
+    | 'third'
+    | 'destructive'
+    | 'outline'
+    | 'ghost'
+    | 'link'
+    | null
+    | undefined
+  children: React.ReactNode
+  className?: React.HTMLProps<HTMLElement>['className']
+}
+
+export function NavLinkSearchParams(props: NavLinkProps) {
+  const searchParams = useSearchParams()
+
+  const category = searchParams.get('categoria')
+
+  return (
+    <Button
+      data-current={category === props.href}
+      className={`data-[current=true]:font-semibold rounded-2xl ${props.className}`}
+      variant={category === props.href ? 'third' : props.variant}
+      asChild
+    >
+      <Link href={{ query: { categoria: props.href as string } }}>
+        {props.children}
+      </Link>
+    </Button>
+  )
+}

src/components/skeleton-serach-params.tsx

+export function SkeletonSerachParams() {
+  return <div>CARREGANDO...</div>
+}

src/utils/courses-array.ts

@@ -61,7 +61,7 @@ export const CoursesCard: CoursesCardTypes[] = [
     image: banner,
     title: 'Gestão em Saúde',
     hours: '30 h / Curso rápido',
-    category: 'estudante',
+    category: 'saúde',
     calender: 'Início imediato',
   },
   {
@@ -77,7 +77,7 @@ export const CoursesCard: CoursesCardTypes[] = [
     image: ImageCoverCourse,
     title: 'Gestão em Saúde',
     hours: '30 h / Curso rápido',
-    category: 'estudante',
+    category: 'saúde',
     calender: 'Início imediato',
   },
   {
@@ -85,7 +85,7 @@ export const CoursesCard: CoursesCardTypes[] = [
     image: banner,
     title: 'Gestão em Projetos',
     hours: '30 h / Curso rápido',
-    category: 'estudante',
+    category: 'negócios',
     calender: 'Início imediato',
   },
   {
@@ -93,7 +93,7 @@ export const CoursesCard: CoursesCardTypes[] = [
     image: ImageCoverCourse,
     title: 'Gestão em Saúde',
     hours: '30 h / Curso rápido',
-    category: 'estudante',
+    category: 'saúde',
     calender: 'Início imediato',
   },
 ]