feat: custom not-found page

tarcisioandrade · Sep 28, 2023 · 016c469 · 016c469
1 parent 0627c4e
commit 016c469
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 12 deletions.
diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx
@@ -0,0 +1,16 @@
+import Footer from "@/components/footer";
+import Header from "@/components/header";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Header />
+      {children}
+      <Footer />
+    </>
+  );
+}
diff --git a/src/app/page.tsx → src/app/(home)/page.tsx b/src/app/page.tsx → src/app/(home)/page.tsx
diff --git a/src/app/(post-page)/layout.tsx b/src/app/(post-page)/layout.tsx
@@ -0,0 +1,16 @@
+import Footer from "@/components/footer";
+import Header from "@/components/header";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Header />
+      {children}
+      <Footer />
+    </>
+  );
+}
diff --git a/src/app/category/layout.tsx b/src/app/category/layout.tsx
@@ -0,0 +1,16 @@
+import Footer from "@/components/footer";
+import Header from "@/components/header";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Header />
+      {children}
+      <Footer />
+    </>
+  );
+}
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -8,11 +8,11 @@
   }
 
   mark {
-    @apply dark:bg-slate-800 bg-gray-200 text-black dark:text-white rounded py-[4.5px] px-[6px];
+    @apply rounded bg-gray-200 px-[6px] py-[4.5px] text-black dark:bg-slate-800 dark:text-white;
   }
 
   iframe {
-    @apply sm:w-full w-[calc(100%+16px*2)] h-[500px] border-none rounded overflow-hidden relative z-10 sm:m-0 m-[calc(16px*-1)];
+    @apply relative z-10 m-[calc(16px*-1)] h-[500px] w-[calc(100%+16px*2)] overflow-hidden rounded border-none sm:m-0 sm:w-full;
   }
 }
 
@@ -36,7 +36,7 @@ body {
 }
 
 .main-container {
-  @apply px-4 max-w-[1100px] mx-auto;
+  @apply mx-auto max-w-[1100px] px-4;
 }
 
 .post-paragraph,
@@ -71,5 +71,5 @@ body {
 }
 
 .list {
-  @apply pl-8 mb-9 [&>li]:mb-4 [&>li]:pl-2 text-lg tracking-wide;
+  @apply mb-9 pl-8 text-lg tracking-wide [&>li]:mb-4 [&>li]:pl-2;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,3 @@
-import Footer from "@/components/footer";
-import Header from "@/components/header";
 import { ThemeProvider } from "@/components/theme-provider";
 import type { Metadata } from "next";
 import { Outfit } from "next/font/google";
@@ -9,7 +7,7 @@ import "./globals.css";
 const outfit = Outfit({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  description: "Artigos sobre react, typescript, testes e etc.",
+  description: "Artigos e tutorias sobre react, typescript, testes e etc.",
   metadataBase: new URL(process.env.DOMAIN_URL as string),
   openGraph: {
     description: "Artigos e tutoriais sobre react, typescript, testes e etc.",
@@ -39,9 +37,7 @@ export default function RootLayout({
     <html lang="pt-BR" suppressHydrationWarning>
       <body className={outfit.className}>
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <Header />
           {children}
-          <Footer />
         </ThemeProvider>
       </body>
     </html>

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -0,0 +1,26 @@
+import { ArrowRight } from "lucide-react";
+import { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "Not Found",
+};
+
+export default function NotFound() {
+  return (
+    <main className="main-container mt-[150px] flex h-screen w-full justify-center md:mt-0 md:items-center">
+      <div>
+        <h1 className="mb-9 text-5xl font-bold md:mb-14 md:text-6xl">
+          Página não encontrada ☹️
+        </h1>
+        <Link
+          className="flex items-center gap-2 text-lg text-blue-600 md:text-4xl"
+          href="/"
+        >
+          Voltar a página inicial
+          <ArrowRight />
+        </Link>
+      </div>
+    </main>
+  );
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,24 +1,24 @@
 import type { Config } from "tailwindcss";
 
 const config: Config = {
-  darkMode: ["class"],
   content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
+  darkMode: ["class"],
+  plugins: [],
   theme: {
     extend: {
       backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
         "gradient-conic":
           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
       },
       colors: {
         background: "#0e141b",
       },
     },
   },
-  plugins: [],
 };
 export default config;