Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
vidane
/
vtorio
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

feat(header): add Header component with logo and logout button

vidane 6 miesięcy temu
rodzic
a7772f0a67
commit
cbb961bb10
3 zmienionych plików z 34 dodań i 3 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 2 2
      app/components/authButtons.tsx
  2. 27 0
      app/components/header.tsx
  3. 5 1
      app/layout.tsx

+ 2 - 2
app/components/authButtons.tsx
Wyświetl plik 

@@ -20,12 +20,12 @@ export function LogoutButton() {
 
   if (!user) return null;
 
   
   return (
 
-    <Link
 
+    <a
 
       href="/api/auth/logout"
 
       className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
 
     >
 
       Logout
 
-    </Link>
 
+    </a>
 
   );
 
 }

+ 27 - 0
app/components/header.tsx
Wyświetl plik 

@@ -0,0 +1,27 @@
 
+"use client";
 
+
 
+import Link from "next/link";
 
+import { LogoutButton } from "./authButtons";
 
+
 
+export function Header() {
 
+  return (
 
+    <header className="border-b border-gray-200 bg-white">
 
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
 
+        <div className="flex justify-between items-center py-4">
 
+          <div className="flex items-center">
 
+            <Link href="/" className="flex items-center">
 
+              <img
 
+                src="/vtorio.svg"
 
+                alt="vtor.io"
 
+                className="h-8 w-auto"
 
+              />
 
+            </Link>
 
+          </div>
 
+          <div className="flex items-center space-x-4">
 
+            <LogoutButton />
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </header>
 
+  );
 
+}

+ 5 - 1
app/layout.tsx
Wyświetl plik 

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 
 import { Geist, Geist_Mono } from "next/font/google";
 
 import "./globals.css";
 
 import { Providers } from "./providers";
 
+import { Header } from "./components/header";
 
 
 const geistSans = Geist({
 
   variable: "--font-geist-sans",
 
@@ -27,7 +28,10 @@ export default function RootLayout({
 
     <html lang="en">
 
       <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
 
         <Providers>
 
-          {children}
 
+          <Header />
 
+          <main>
 
+            {children}
 
+          </main>
 
         </Providers>
 
       </body>
 
     </html>