refactor ui

src/pages/_app.tsx

@@ -1,9 +1,12 @@
 import "../styles/globals.css"
 
-import { QueryClientProvider, QueryClient } from "@tanstack/react-query"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import type { AppType } from "next/dist/shared/lib/utils"
 
-import { AuthRedirect } from "@/components"
+import { AuthRedirect, Button } from "@/components"
+import { ModeToggle } from "@/components/mode-toggle"
+import { ThemeProvider } from "@/components/theme-provider"
+import { useLogoutMutation } from "@/services"
 
 const queryClient = new QueryClient()
 
@@ -11,10 +14,36 @@ const MyApp: AppType = ({ Component, pageProps }) => {
   return (
     <QueryClientProvider client={queryClient}>
       <AuthRedirect>
-        <Component {...pageProps} />
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <Header />
+          <Component {...pageProps} />
+        </ThemeProvider>
       </AuthRedirect>
     </QueryClientProvider>
   )
 }
 
+function Header() {
+  const { mutate: logout } = useLogoutMutation()
+  const handleLogout = () => {
+    logout()
+  }
+  return (
+    <header className={"flex justify-between items-center p-4"}>
+      <h1 className={"text-3xl"}>Tasks</h1>
+      <div className={"flex gap-4"}>
+        <ModeToggle />
+        <Button onClick={handleLogout} variant={"outline"}>
+          Logout
+        </Button>
+      </div>
+    </header>
+  )
+}
+
 export default MyApp