Merge pull request #1 from WebmasterCamp/navbar

add navbar

src/app/globals.css

@@ -63,6 +63,7 @@
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }

src/app/layout.tsx

@@ -5,6 +5,7 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 import { ThemeProvider } from "@/components/theme-provider";
+import { Navbar } from "@/components/navbar";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -23,9 +24,12 @@ export default function RootLayout({
           attribute="class"
           defaultTheme="system"
           enableSystem
-          // disableTransitionOnChange
+        // disableTransitionOnChange
         >
-          {children}
+          <Navbar />
+          <main>
+            {children}
+          </main>
         </ThemeProvider>
       </body>
     </html>

src/app/page.tsx

@@ -1,9 +1,7 @@
-import { ThemeToggle } from "@/components/theme-toggle";
-
 export default function Page() {
   return (
     <div className="flex items-center justify-center min-h-screen">
-      <ThemeToggle />
+      <h1 className="text-4xl font-bold">Hello, world!</h1>
     </div>
   );
 }

src/components/navbar.tsx

@@ -0,0 +1,29 @@
+import Link from "next/link";
+
+import { ThemeToggle } from "./theme-toggle";
+import { Button } from "./ui/button";
+
+export function Navbar() {
+    return (
+        <header className="sticky top-0 z-50 w-full shadow-md dark:border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+            <div className="container flex h-[4rem] max-w-screen-2xl items-center">
+                <div className="mr-6 flex items-center space-x-2">
+                    <Link href="/">
+                        <h1 className="font-bold">brand</h1>
+                    </Link>
+                </div>
+                <div className="flex flex-row items-center space-x-4">
+                    <Link href="/faq">วิธีใช้</Link>
+                    <Link href="/management">วางแผนการเงิน</Link>
+                    <Link href="/about">เกี่ยวกับเรา</Link>
+                </div>
+                <div className="flex flex-1 items-center justify-end space-x-2">
+                    <Link href="/signin">
+                        <Button variant="default">เข้าสู่ระบบ</Button>
+                    </Link>
+                    <ThemeToggle />
+                </div>
+            </div>
+        </header>
+    );
+}