Updated header and added not found page

src/app/(main)/layout.tsx

@@ -1,18 +1,10 @@
-import { ThemeSwitcher } from "@/components/theme-switcher"
-import Link from "next/link"
+import Header from "@/components/header"
 import { ReactNode } from "react"
 
 export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
     return (
         <>
-            <header className="fixed w-screen bg-background/50 backdrop-blur-sm">
-                <nav className="flex justify-between items-center px-6 border-b h-header">
-                    <Link href="/">
-                        <span className="text-lg font-semibold">Hypixel Stats</span>
-                    </Link>
-                    <ThemeSwitcher />
-                </nav>
-            </header>
+            <Header />
             <div className="pt-header">
                 {children}
             </div>

src/app/(stats)/layout.tsx

@@ -1,20 +1,10 @@
-import { SearchBar } from "@/components/search-bar"
-import { ThemeSwitcher } from "@/components/theme-switcher"
-import Link from "next/link"
+import Header from "@/components/header"
 import { ReactNode } from "react"
 
 export default function StatsLayout({ children }: Readonly<{ children: ReactNode }>) {
     return (
         <>
-            <header className="fixed w-screen z-1000 bg-background/50 backdrop-blur-sm">
-                <nav className="flex justify-between items-center px-6 border-b h-header">
-                    <Link href="/">
-                        <span className="text-lg font-semibold">Hypixel Stats</span>
-                    </Link>
-                    <SearchBar navbar />
-                    <ThemeSwitcher />
-                </nav>
-            </header>
+            <Header searchBar />
             <div className="pb-5 pt-header min-h-content">
                 {children}
             </div>

src/app/(stats)/player/[ign]/page.tsx

@@ -52,7 +52,7 @@ async function SuspendedPage({ ign: pign }: { ign: string }) {
     if (!player) {
         return (
             <div className="flex flex-col items-center min-h-screen">
-                <h1 className="mt-25">Player not found</h1>
+                <h1 className="mt-25">Player hasn&apos;t joined hypixel</h1>
             </div>
         )
     }

src/app/not-found.tsx

@@ -0,0 +1,22 @@
+import Header from "@/components/header"
+import { Button } from "@/components/ui/button"
+import { ArrowLeftIcon } from "lucide-react"
+import Link from "next/link"
+
+export default function NotFound() {
+    return (
+        <div>
+            <Header searchBar />
+            <main className="flex flex-col items-center pt-header">
+                <Button className="self-start mt-4 ml-4" variant="secondary" asChild>
+                    <Link href="/">
+                        <ArrowLeftIcon />
+                        Back to Main page
+                    </Link>
+                </Button>
+                <h1 className="pt-20 text-3xl font-bold max-w-fit">404</h1>
+                <h1 className="text-3xl font-bold max-w-fit">Page not found</h1>
+            </main>
+        </div>
+    )
+}

src/components/header.tsx

@@ -0,0 +1,17 @@
+import Link from "next/link"
+import { SearchBar } from "./search-bar"
+import { ThemeSwitcher } from "./theme-switcher"
+
+export default function Header({ searchBar = false }: { searchBar?: boolean }) {
+    return (
+        <header className="fixed w-screen bg-background/50 backdrop-blur-sm">
+            <nav className="flex justify-between items-center px-6 border-b h-header">
+                <Link href="/">
+                    <span className="text-lg font-semibold">Hypixel Stats</span>
+                </Link>
+                {searchBar && <SearchBar navbar />}
+                <ThemeSwitcher />
+            </nav>
+        </header>
+    )
+}