refactor: reuse header and footer

components/site-header.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import Link from "next/link"
+import TunnlLogo from "./tunnl-logo"
+import UserMenu from "./user-menu"
+import { useEffect, useState } from "react"
+import { authClient } from "@/lib/auth-client";
+import { redirect, RedirectType } from 'next/navigation'
+
+export default function SiteHeader() {
+    type SessionData = Awaited<ReturnType<typeof authClient.getSession>>;
+    const [logedin, setLogedin] = useState<SessionData | null>(null)
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const result = await authClient.getSession()
+                if (result.data != null) {
+                    setLogedin(result.data.user);
+                }
+            } catch (error) {
+                console.error('Error fetching data:', error);
+            }
+        };
+
+        fetchData();
+    }, []);
+
+    const logout = async () => {
+        await authClient.signOut({
+            fetchOptions: {
+                onSuccess: () => {
+                    redirect('/login', RedirectType.replace)
+                }
+            }
+        })
+    }
+    return (
+        <header className="border-b border-gray-800 bg-gray-900/50 backdrop-blur-sm">
+            <div className="max-w-7xl mx-auto px-4 py-4">
+                <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                        <TunnlLogo />
+                        <span className="text-xl font-bold">
+                            <span className="text-emerald-400">tunnl</span>.live
+                        </span>
+                    </div>
+                    
+                    <div className="flex items-center gap-4">
+                        {logedin ? (
+                            <UserMenu
+                                user={{
+                                    name: logedin.name ?? "User",
+                                    email: logedin.email ?? "",
+                                    image: logedin.image ?? undefined,
+                                }}
+                                onSignOut={logout}
+                            />
+                        ) : (
+                            <>
+                                <Link
+                                    href="/login"
+                                    className="flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg font-medium transition-colors"
+                                >
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        width="16"
+                                        height="16"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        strokeWidth="2"
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                    >
+                                        <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
+                                        <polyline points="10 17 15 12 10 7" />
+                                        <line x1="15" x2="3" y1="12" y2="12" />
+                                    </svg>
+                                    Sign In
+                                </Link>
+
+                                <div className="hidden md:flex items-center gap-2 text-sm text-gray-400">
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        width="16"
+                                        height="16"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        strokeWidth="2"
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        className="text-emerald-400"
+                                    >
+                                        <circle cx="12" cy="12" r="10" />
+                                        <path d="M12 16v-4" />
+                                        <path d="M12 8h.01" />
+                                    </svg>
+                                    <span>Sign in to save configurations & view history</span>
+                                </div>
+                            </>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </header>
+    )
+}