Desenvolvedores
src_
app_
(app)
layout.ts

📝 Documentação do arquivo layout.js da pasta (app)

📚 Descrição Geral

O componente layout.js define a estrutura básica da aplicação PetAcademy. Ele é responsável por incorporar o tema, fontes, e o contexto para os cursos oferecidos na plataforma.

🚀 Importações

As importações são responsáveis por trazer recursos essenciais para a funcionalidade do layout. O código abaixo define as dependências necessárias para o componente.

import { ThemeProvider } from '@/components/theme-provider'
import { Montserrat } from 'next/font/google'
import { cn } from '@/lib/utils'
import '@/app/globals.css'
import NavBar from '@/components/NavBar'
import { CoursesProvider } from '@/components/context/CoursesContext'

Explicação das Importações:

  • ThemeProvider: Suporte para alternar entre temas claro e escuro 🌙🌞.
  • Montserrat: Fonte Montserrat do Google Fonts.
  • cn: Função utilitária para manipulação de classes CSS 🧩.
  • globals.css: Estilos globais da aplicação.
  • NavBar: Componente de navegação principal.
  • CoursesProvider: Contexto que fornece informações sobre cursos 🎓.

🖋 Fonte Montserrat

A fonte Montserrat é configurada com vários subconjuntos e pesos para garantir flexibilidade no design.

const montserrat = Montserrat({
  subsets: ['latin'],
  weight: ['100', '300', '400', '500', '700', '900'],
  variable: '--font-sans',
})

Subconjuntos e Pesos:

  • Subconjuntos: latin
  • Pesos: 100, 300, 400, 500, 700, 900

📊 Metadados da Aplicação

O título e a descrição da aplicação são configurados como segue:

export const metadata = {
  title: 'PetAcademy',
  description: 'Plataforma online de cursos gratuitos',
}

Explicação:

  • Título: PetAcademy 🐾
  • Descrição: Plataforma online de cursos gratuitos 🎓

🏗 Estrutura do Componente

O componente RootLayout é o responsável por renderizar o layout da aplicação. A estrutura básica é mostrada a seguir:

export default function RootLayout({ children }) {
  return (
    <html lang="pt-br" suppressHydrationWarning>
      <head />
      <body className={cn('min-h-screen bg-background font-sans antialiased', montserrat.variable)}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <CoursesProvider>
            <NavBar />
            <main>{children}</main>
          </CoursesProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}

Explicação da Estrutura HTML:

  • <html>: Define a língua como português do Brasil (lang="pt-br").
  • <head>: Cabeçalho da página, atualmente vazio 🧠.
  • <body>: Aplicação de estilos com classes CSS para altura mínima e fundo, incluindo a variável de fonte Montserrat.

🛠️ Provedores

Dois provedores são usados para configurar o tema e o contexto de cursos na aplicação:

  • ThemeProvider: Permite definir o tema da aplicação, com suporte para alternância entre modos claro e escuro.
    • attribute: Define o atributo do tema.
    • defaultTheme: Tema padrão.
    • enableSystem: Habilita o ajuste automático do tema com base nas configurações do sistema.
    • disableTransitionOnChange: Desabilita transições ao alternar o tema.
  • CoursesProvider: Envolve a navegação e o conteúdo principal da aplicação, fornecendo os dados dos cursos 🖥️.

📌 Conteúdo Principal

O conteúdo é renderizado dinamicamente dentro da tag <main>, sendo passado como filhos para o componente RootLayout.

📋 Considerações Finais

Este componente é essencial para garantir que o layout da aplicação PetAcademy tenha uma base sólida. Ele facilita a navegação e permite a renderização do conteúdo dos cursos de maneira eficaz.

🔧 Código Completo

import { ThemeProvider } from '@/components/theme-provider'
import { Montserrat } from 'next/font/google'
import { cn } from '@/lib/utils'
import '@/app/globals.css'
import NavBar from '@/components/NavBar'
import { CoursesProvider } from '@/components/context/CoursesContext'
 
const montserrat = Montserrat({
  subsets: ['latin'],
  weight: ['100', '300', '400', '500', '700', '900'],
  variable: '--font-sans',
})
 
export const metadata = {
  title: 'PetAcademy',
  description: 'Plataforma online de cursos gratuitos',
}
 
export default function RootLayout({ children }) {
  return (
    <html lang="pt-br" suppressHydrationWarning>
      <head />
      <body className={cn('min-h-screen bg-background font-sans antialiased', montserrat.variable)}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <CoursesProvider>
            <NavBar />
            <main>{children}</main>
          </CoursesProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}
globals.csspage.js