1029u

apps/web2/src/app/_components/auth/logout-button.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+
+import { logout } from '@/app/actions/logout';
+
+import { Button } from '../ui/button';
+
+export const LogoutButton: React.FC<PropsWithChildren> = ({ children }) => {
+    return <Button onClick={() => logout()}>{children}</Button>;
+};

apps/web2/src/app/_components/header/index.tsx

@@ -1,7 +1,16 @@
-import { Logo } from './logo';
+'use client';
 
-export const Header = () => (
+import { useSession } from 'next-auth/react';
-    <header className=" tw-flex tw-justify-center tw-items-center tw-pt-6 tw-max-h-24 tw-flex-auto">
+
-        <Logo />
+import { User } from './user';
+
+export const Header = () => {
+    const sisson = useSession();
+    console.log(sisson.data?.user?.name, 111);
+
+    return (
+        <header className=" tw-flex tw-flex-row-reverse  tw-pt-6 tw-max-h-24 tw-flex-auto">
+            <User />
         </header>
-);
+    );
+};

apps/web2/src/app/_components/header/logo.tsx

@@ -1,21 +0,0 @@
-import Image from 'next/image';
-import Link from 'next/link';
-
-import abc from './next.svg';
-
-import $styles from './page.module.css';
-
-export const Logo = () => (
-    <Link href="/" className={$styles.link}>
-        <Image
-            priority
-            src={abc}
-            alt="avatar logo"
-            sizes="100vw"
-            style={{
-                width: '100%',
-                height: 'auto',
-            }}
-        />
-    </Link>
-);

apps/web2/src/app/_components/header/user.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import Link from 'next/link';
+import { useSession } from 'next-auth/react';
+
+import { useState } from 'react';
+
+import { logout } from '@/app/actions/logout';
+
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
+
+import { Button } from '../ui/button';
+
+export const User = () => {
+    const { data } = useSession();
+    const [user, setUser] = useState(data.user);
+    return (
+        <div className=" tw-flex tw-justify-center tw-items-center tw-space-x-6 tw-mr-36">
+            {data.user && (
+                <Avatar className="tw-h-12 tw-w-12">
+                    <AvatarImage width={160} height={160} src={data?.user.image} />
+                    <AvatarFallback>
+                        <p className="">暂无</p>
+                    </AvatarFallback>
+                </Avatar>
+            )}
+            {data?.user?.name ? (
+                <p className="tw-text-lg tw-font-bold tw-text-white">{data?.user?.name}</p>
+            ) : (
+                <></>
+            )}
+            {data?.user ? (
+                <Button onClick={() => logout()}>退出</Button>
+            ) : (
+                <Link href="/auth/login">
+                    <p className="tw-text-white">登录</p>
+                </Link>
+            )}
+        </div>
+    );
+};

apps/web2/src/app/actions/logout.ts

@@ -0,0 +1,7 @@
+'use server';
+
+import { signOut } from '@/auth';
+
+export const logout = async () => {
+    await signOut();
+};