From 2640559de8a639d1f427ee1ab9a42b604a9fbebb Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Wed, 3 Dec 2025 20:39:13 +0000
Subject: [PATCH] Add logout button to home page header

---
 app/page.tsx                |  2 ++
 components/LogoutButton.tsx | 21 +++++++++++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 components/LogoutButton.tsx

diff --git a/app/page.tsx b/app/page.tsx
index a133379..b6892b2 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,6 +3,7 @@ import ListCard from '@/components/ListCard'
 import NewListButton from '@/components/NewListButton'
 import GlobalSearch from '@/components/GlobalSearch'
 import EmptyState from '@/components/EmptyState'
+import LogoutButton from '@/components/LogoutButton'
 import Link from 'next/link'
 import { getServerSession } from 'next-auth'
 import { authOptions } from '@/pages/api/auth/[...nextauth]'
@@ -39,6 +40,7 @@ export default async function Home() {
               >
                 Profile
               </Link>
+              <LogoutButton />
             </>
           )}
           <NewListButton />
diff --git a/components/LogoutButton.tsx b/components/LogoutButton.tsx
new file mode 100644
index 0000000..a795cb6
--- /dev/null
+++ b/components/LogoutButton.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { signOut } from 'next-auth/react'
+import { LogOut } from 'lucide-react'
+
+export default function LogoutButton() {
+  const handleLogout = async () => {
+    await signOut({ callbackUrl: '/auth/login' })
+  }
+
+  return (
+    <button
+      onClick={handleLogout}
+      className="flex items-center gap-2 px-3 py-2 text-sm text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors"
+      aria-label="Log out"
+    >
+      <LogOut size={16} />
+      <span>Log out</span>
+    </button>
+  )
+}