rearrange pages

app/components/layout/Header.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import Link from 'next/link';
+import { useAuth } from '@/lib/auth';
+
+export default function Header() {
+  const { user, signOut } = useAuth();
+  
+  const handleLogout = async () => {
+    await signOut();
+  };
+  
+  return (
+    <header className="w-full py-4 border-b border-gray-200 bg-white">
+      <div className="container flex items-center justify-between px-4 mx-auto">
+        <div className="flex items-center space-x-4">
+          <Link href="/" className="flex items-center space-x-2">
+            <svg
+              className="w-6 h-6 text-blue-500"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+              <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+            </svg>
+            <span className="text-xl font-bold text-gray-900">ShortURL Analytics</span>
+          </Link>
+        </div>
+        
+        {user && (
+          <div className="flex items-center space-x-4">
+            <div className="text-sm text-gray-700">
+              {user.email}
+            </div>
+            <button 
+              onClick={handleLogout}
+              className="px-4 py-2 text-sm text-white bg-blue-500 rounded hover:bg-blue-600"
+            >
+              Logout
+            </button>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}