feat: use custom SignOutButton to apply custom CSS styles, unified wi…

…th other nav links

src/app/(auth)/dashboard/layout.tsx

@@ -1,6 +1,6 @@
-import { SignOutButton } from '@clerk/nextjs';
 import Link from 'next/link';
 
+import { SignOutButton } from '@/components/SignOutButton';
 import { AppConfig } from '@/utils/AppConfig';
 
 export default function DashboardLayout({

src/components/SignOutButton.tsx

@@ -1,17 +1,21 @@
 'use client';
 
-import { SignOutButton as SignOutButtonClerk } from '@clerk/nextjs';
-import { redirect } from 'next/navigation';
+import { useClerk } from '@clerk/nextjs';
+import { useRouter } from 'next/navigation';
 
-const SignOutButton = () => (
-  <SignOutButtonClerk signOutCallback={() => redirect('/')}>
+const SignOutButton = () => {
+  const router = useRouter();
+  const { signOut } = useClerk();
+
+  return (
     <button
       className="border-none text-gray-700 hover:text-gray-900"
       type="button"
+      onClick={() => signOut(() => router.push('/'))}
     >
       Sign out
     </button>
-  </SignOutButtonClerk>
-);
+  );
+};
 
 export { SignOutButton };