feat: adding to loader

webdevcody · webdevcody · commit af8fb2b12aab · 2023-07-09T16:56:53.000-04:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "next": "13.4.9",
     "next-auth": "^4.22.1",
     "next-themes": "^0.2.1",
+    "nextjs-toploader": "^1.4.2",
     "postcss": "8.4.25",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,9 +2,9 @@ import Header from "@/components/header";
 import "./globals.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-
+import NextTopLoader from "nextjs-toploader";
 import { Footer } from "@/components/footer";
-import { ThemeProvider } from "@/components/theme-provider"
+import { ThemeProvider } from "@/components/theme-provider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -14,13 +14,14 @@ export const metadata: Metadata = {
 };
 
 export default function RootLayout({
-  children
+  children,
 }: {
   children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body className={inter.className}>
+        <NextTopLoader />
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           <Header />
           {children}
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -20,14 +20,15 @@ const Header = () => {
       <nav className="w-full border-b md:border-0 md:static">
         <div className="items-center px-4 max-w-screen-xl mx-auto md:flex md:px-8">
           <div className="flex items-center justify-between py-3 md:py-5 md:block">
-            <Link href="/">
+            <Link href="/" className="flex gap-2 items-center">
               <Image
                 unoptimized
                 src="/static/logo.png"
-                width={50}
-                height={50}
+                width={30}
+                height={30}
                 alt="Code Racer Logo"
               />
+              CodeRacer
             </Link>
             <div className="md:hidden">
               <Button onClick={() => setState(!state)}>
