feat: create area page

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

+import { StyledInputs } from '@/components/mui/styled-inputs'
+import { Button } from '@/components/ui/button'
+import { TextField } from '@mui/material'
+import { Trash } from 'lucide-react'
+
+export default function AreaId() {
+  return (
+    <section className="container py-10">
+      <div className="flex items-center gap-6">
+        <h1 className="text-green-700 text-3xl font-bold">Editar Área</h1>
+        <Button variant="third" className="uppercase">
+          Salvar como rascunho
+        </Button>
+        <Button variant="secondary" className="uppercase">
+          Salvar e publicar
+        </Button>
+        <Button
+          variant="ghost"
+          className="uppercase flex items-center gap-2 text-orange-100 hover:text-orange-100"
+        >
+          <span>Apagar área</span>
+          <Trash />
+        </Button>
+      </div>
+      <div className="w-full">
+        <TextField
+          label="Nome da área"
+          variant="standard"
+          type="text"
+          className="flex"
+          sx={StyledInputs({ color: '#26AAA7' })}
+        />
+
+        <div className="flex justify-between flex-wrap gap-6">
+          <div className="flex flex-col flex-1 mt-6">
+            <h6 className="text-xl text-purple-100">Banner Desktop</h6>
+            <span className="mt-4">Dimensões recomendadas: </span>
+            <span>Formatos aceitos: .png, .jpg</span>
+
+            <Button
+              variant="third"
+              className="border border-dotted border-green-400 rounded-sm mt-6 mx-auto w-full"
+            >
+              Adicionar banner
+            </Button>
+          </div>
+          <div className="flex flex-col flex-1 mt-6">
+            <h6 className="text-xl text-purple-100">Banner Mobile</h6>
+            <span className="mt-4">Dimensões recomendadas: </span>
+            <span>Formatos aceitos: .png, .jpg</span>
+            <Button
+              variant="third"
+              className="border border-dotted border-green-400 rounded-sm mt-6 mx-auto w-full"
+            >
+              Adicionar banner
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

src/app/admin/area/page.tsx

+import { StyledInputs } from '@/components/mui/styled-inputs'
+import { Button } from '@/components/ui/button'
+import { TextField } from '@mui/material'
+import { Trash } from 'lucide-react'
+
+export default function Area() {
+  return (
+    <section className="container py-10">
+      <div className="flex items-center gap-6">
+        <h1 className="text-green-700 text-3xl font-bold">Criar Área</h1>
+        <Button variant="third" className="uppercase">
+          Salvar como rascunho
+        </Button>
+        <Button variant="secondary" className="uppercase">
+          Salvar e publicar
+        </Button>
+        <Button
+          variant="ghost"
+          className="uppercase flex items-center gap-2 text-orange-100 hover:text-orange-100"
+        >
+          <span>Apagar área</span>
+          <Trash />
+        </Button>
+      </div>
+      <div className="w-full">
+        <TextField
+          label="Nome da área"
+          variant="standard"
+          type="text"
+          className="flex"
+          sx={StyledInputs({ color: '#26AAA7' })}
+        />
+
+        <div className="flex justify-between flex-wrap gap-6">
+          <div className="flex flex-col flex-1 mt-6">
+            <h6 className="text-xl text-purple-100">Banner Desktop</h6>
+            <span className="mt-4">Dimensões recomendadas: </span>
+            <span>Formatos aceitos: .png, .jpg</span>
+
+            <Button
+              variant="third"
+              className="border border-dotted border-green-400 rounded-sm mt-6 mx-auto w-full"
+            >
+              Adicionar banner
+            </Button>
+          </div>
+          <div className="flex flex-col flex-1 mt-6">
+            <h6 className="text-xl text-purple-100">Banner Mobile</h6>
+            <span className="mt-4">Dimensões recomendadas: </span>
+            <span>Formatos aceitos: .png, .jpg</span>
+            <Button
+              variant="third"
+              className="border border-dotted border-green-400 rounded-sm mt-6 mx-auto w-full"
+            >
+              Adicionar banner
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

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

+'use client'
+
+import { StyledInputs } from '@/components/mui/styled-inputs'
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Label } from '@/components/ui/label'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { Separator } from '@/components/ui/separator'
+import { cn } from '@/lib/utils'
+import { Autocomplete, TextField } 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 },
+]
+
+export default function EditCourse() {
+  const [date, setDate] = useState<Date>()
+
+  return (
+    <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>
+          <Button variant="third" className="uppercase">
+            Salvar como rascunho
+          </Button>
+          <Button variant="secondary" className="uppercase">
+            Salvar e publicar
+          </Button>
+          <Button
+            variant="ghost"
+            className="uppercase flex items-center gap-2 text-orange-100 hover:text-orange-100"
+          >
+            <span>Apagar curso</span>
+            <Trash />
+          </Button>
+        </div>
+        <div className="flex w-full mt-10">
+          <div className="flex-1 flex flex-col border-r border-gray-50 pr-6 space-y-4">
+            <h6 className="text-xl text-purple-100">
+              Informações sobre o curso
+            </h6>
+
+            <TextField
+              label="Nome do curso"
+              variant="standard"
+              type="text"
+              sx={StyledInputs({ color: '#26AAA7' })}
+            />
+
+            <Autocomplete
+              options={options}
+              sx={StyledInputs({ color: '#26AAA7' })}
+              renderInput={(params) => (
+                <TextField {...params} label="Área" variant="standard" />
+              )}
+            />
+
+            <TextField
+              label="Descrição do Curso"
+              variant="standard"
+              type="text"
+              multiline
+              rows={4}
+              sx={StyledInputs({ color: '#26AAA7' })}
+            />
+
+            <TextField
+              label="Nome dos(as) Professores(as):"
+              variant="standard"
+              type="text"
+              sx={StyledInputs({ color: '#26AAA7' })}
+            />
+
+            <div className="flex justify-between flex-wrap gap-6">
+              <div className="flex flex-col flex-1 mt-6">
+                <h6 className="text-xl text-purple-100">Banner Desktop</h6>
+                <span className="mt-4">Dimensões recomendadas: </span>
+                <span>Formatos aceitos: .png, .jpg</span>
+                <Button
+                  variant="third"
+                  className="border border-dotted border-green-400 rounded-sm mt-6 mx-auto md:w-[436px]"
+                >
+                  Adicionar banner
+                </Button>
+              </div>
+              <div className="flex flex-col flex-1 mt-6">
+                <h6 className="text-xl text-purple-100">Banner Mobile</h6>
+                <span className="mt-4">Dimensões recomendadas: </span>
+                <span>Formatos aceitos: .png, .jpg</span>
+                <Button
+                  variant="third"
+                  className="border border-dotted border-green-400 rounded-sm mt-6 mx-auto md:w-[436px]"
+                >
+                  Adicionar banner
+                </Button>
+              </div>
+            </div>
+
+            <Separator className="!mt-10 !mb-4" />
+            <h6 className="text-xl text-purple-100 mb-4">Datas</h6>
+            <div className="flex flex-col space-y-6">
+              <div className="flex justify-between items-center">
+                <div className="flex items-center gap-2">
+                  <Checkbox id="start" />
+                  <label
+                    htmlFor="start"
+                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  >
+                    Definir data de início
+                  </label>
+                </div>
+                <div className="flex flex-col">
+                  <Label>Data de início</Label>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant={'ghost'}
+                        className={cn(
+                          'lg:w-[450px] justify-start text-left font-normal border-b rounded-none pl-0',
+                          !date && 'text-muted-foreground',
+                        )}
+                      >
+                        {date ? (
+                          format(date, 'dd/MM/yyyy')
+                        ) : (
+                          <span className="text-gray-600">MM/DD/YYYY</span>
+                        )}
+                        <CalendarIcon className="ml-auto h-4 w-4 text-green-400" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0">
+                      <Calendar
+                        mode="single"
+                        selected={date}
+                        onSelect={setDate}
+                        initialFocus
+                      />
+                    </PopoverContent>
+                  </Popover>
+                </div>
+              </div>
+              <div className="flex justify-between items-center">
+                <div className="flex items-center gap-2">
+                  <Checkbox id="closure" />
+                  <label
+                    htmlFor="closure"
+                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                  >
+                    Definir data de encerramento
+                  </label>
+                </div>
+                <div className="flex flex-col">
+                  <Label>Data de encerramento</Label>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant={'ghost'}
+                        className={cn(
+                          'lg:w-[450px] justify-start text-left font-normal border-b rounded-none pl-0',
+                          !date && 'text-muted-foreground',
+                        )}
+                      >
+                        {date ? (
+                          format(date, 'dd/MM/yyyy')
+                        ) : (
+                          <span className="text-gray-600">MM/DD/YYYY</span>
+                        )}
+                        <CalendarIcon className="ml-auto h-4 w-4 text-green-400" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0">
+                      <Calendar
+                        mode="single"
+                        selected={date}
+                        onSelect={setDate}
+                        initialFocus
+                      />
+                    </PopoverContent>
+                  </Popover>
+                </div>
+              </div>
+            </div>
+
+            <Separator className="!mt-10 !mb-4" />
+
+            <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' })}
+              />
+
+              <TextField
+                label="Descrição"
+                variant="standard"
+                type="text"
+                multiline
+                rows={4}
+                sx={StyledInputs({ color: '#26AAA7' })}
+              />
+            </div>
+
+            <Button
+              variant="third"
+              className="uppercase w-52 flex items-center gap-2 !mt-8"
+            >
+              <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?
+            </h6>
+            <div className="flex items-center gap-2 ml-4">
+              <Checkbox id="terms" />
+              <label
+                htmlFor="terms"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Estudante
+              </label>
+            </div>
+            <div className="flex items-center gap-2 ml-4">
+              <Checkbox id="terms" />
+              <label
+                htmlFor="terms"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Profissionais
+              </label>
+            </div>
+            <div className="flex items-center gap-2 ml-4">
+              <Checkbox id="terms" />
+              <label
+                htmlFor="terms"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Empresas
+              </label>
+            </div>
+            <h6 className="text-xl text-purple-100 my-4">
+              Qual o tipo de curso?
+            </h6>
+            <div className="flex items-center gap-2 ml-4">
+              <Checkbox id="terms" />
+              <label
+                htmlFor="terms"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Curso rápido
+              </label>
+            </div>
+            <div className="flex items-center gap-2 ml-4">
+              <Checkbox id="terms" />
+              <label
+                htmlFor="terms"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Curso de aprofundamento
+              </label>
+            </div>
+            <div className="flex items-center gap-2 ml-4">
+              <Checkbox id="terms" />
+              <label
+                htmlFor="terms"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Curso Corporativo
+              </label>
+            </div>
+          </div>
+        </div>
+      </form>
+    </section>
+  )
+}

src/app/admin/curso/page.tsx

@@ -54,12 +54,12 @@ export default function Curso() {
               label="Nome do curso"
               variant="standard"
               type="text"
-              sx={StyledInputs('#26AAA7')}
+              sx={StyledInputs({ color: '#26AAA7' })}
             />
 
             <Autocomplete
               options={options}
-              sx={StyledInputs('#26AAA7')}
+              sx={StyledInputs({ color: '#26AAA7' })}
               renderInput={(params) => (
                 <TextField {...params} label="Área" variant="standard" />
               )}
@@ -71,14 +71,14 @@ export default function Curso() {
               type="text"
               multiline
               rows={4}
-              sx={StyledInputs('#26AAA7')}
+              sx={StyledInputs({ color: '#26AAA7' })}
             />
 
             <TextField
               label="Nome dos(as) Professores(as):"
               variant="standard"
               type="text"
-              sx={StyledInputs('#26AAA7')}
+              sx={StyledInputs({ color: '#26AAA7' })}
             />
 
             <div className="flex justify-between flex-wrap gap-6">
@@ -94,14 +94,15 @@ export default function Curso() {
                 </Button>
               </div>
               <div className="flex flex-col flex-1 mt-6">
-                <h6 className="text-xl text-purple-100">Banner Desktop</h6>
+                <h6 className="text-xl text-purple-100">Banner Mobile</h6>
                 <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]"
                 >
-                  Adicionar banner
+                  <input type="file">Adicionar banner</input>
                 </Button>
               </div>
             </div>
@@ -126,7 +127,7 @@ export default function Curso() {
                       <Button
                         variant={'ghost'}
                         className={cn(
-                          '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',
                           !date && 'text-muted-foreground',
                         )}
                       >
@@ -166,7 +167,7 @@ export default function Curso() {
                       <Button
                         variant={'ghost'}
                         className={cn(
-                          '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',
                           !date && 'text-muted-foreground',
                         )}
                       >
@@ -200,7 +201,7 @@ export default function Curso() {
                 label="Título"
                 variant="standard"
                 type="text"
-                sx={StyledInputs('#26AAA7')}
+                sx={StyledInputs({ color: '#26AAA7' })}
               />
 
               <TextField
@@ -209,7 +210,7 @@ export default function Curso() {
                 type="text"
                 multiline
                 rows={4}
-                sx={StyledInputs('#26AAA7')}
+                sx={StyledInputs({ color: '#26AAA7' })}
               />
             </div>
 

src/app/admin/page.tsx

@@ -7,21 +7,27 @@ import Link from 'next/link'
 
 const areas = [
   {
+    id: '1',
     title: 'Educação',
   },
   {
+    id: '2',
     title: 'Negócios',
   },
   {
+    id: '3',
     title: 'Comunicação',
   },
   {
+    id: '4',
     title: 'Saúde',
   },
   {
+    id: '5',
     title: 'Tecnologia',
   },
   {
+    id: '6',
     title: 'Teologia',
   },
 ]
@@ -42,13 +48,17 @@ export default function Admin() {
       <div className="flex h-auto mb-20">
         <aside className="mt-10 w-[348px]">
           <h2 className="text-purple-50 text-2xl">Áreas</h2>
-          <Button className="uppercase mt-6">+ Adicionar novo</Button>
+
+          <Button className="uppercase mt-6" asChild>
+            <Link href="admin/area">+ Adicionar novo</Link>
+          </Button>
+
           <nav className="my-6">
             <ul className="space-y-4">
               {areas.map((area) => (
                 <li key={area.title} className="border-b border-green-400">
                   <Link
-                    href="#"
+                    href={`/admin/area/${area.id}`}
                     className="flex justify-between py-2 hover:bg-green-400/10"
                   >
                     <span>{area.title}</span>
@@ -77,14 +87,20 @@ export default function Admin() {
 
         <div className="flex-1 ml-4 pl-6 border-l border-gray-50">
           <h2 className="text-purple-50 text-2xl">Cursos</h2>
-          <Button className="uppercase mt-6">+ Adicionar novo</Button>
+          <Button className="uppercase mt-6" asChild>
+            <Link href="admin/curso">+ Adicionar novo</Link>
+          </Button>
           <div className="flex items-center flex-1 my-6">
             <Input className="pr-8" placeholder="Pesquisar" />
             <Search size={24} className="-ml-6" />
           </div>
           <div className="flex flex-wrap justify-around gap-4">
             {CoursesCard.map((course) => (
-              <Link key={course.id} className="lowercase" href="#">
+              <Link
+                key={course.id}
+                className="lowercase"
+                href={`admin/curso/${course.id}`}
+              >
                 <div className={`bg-gray-100 pb-4 rounded-lg max-w-[163px]`}>
                   <Card.Image image={course.image.src} width="240" height="320">
                     <Card.Title title={course.title} />

src/components/mui/styled-inputs.ts

-export function StyledInputs(color: string) {
+type StyledInputsProps = {
+  color: string
+}
+
+export function StyledInputs({ color }: StyledInputsProps) {
   return {
     '& .MuiOutlinedInput-root': {
       '& fieldset': {