From f163da41d69f80bff8021ae5268c2b163553144c Mon Sep 17 00:00:00 2001
From: well <ahli1819@sina.com>
Date: Tue, 29 Oct 2024 11:59:38 +0800
Subject: [PATCH] 1029u

---
 .../app/_components/auth/logout-button.tsx    | 11 +++++
 .../web2/src/app/_components/header/index.tsx | 21 +++++++---
 apps/web2/src/app/_components/header/logo.tsx | 21 ----------
 apps/web2/src/app/_components/header/user.tsx | 41 +++++++++++++++++++
 apps/web2/src/app/actions/logout.ts           |  7 ++++
 5 files changed, 74 insertions(+), 27 deletions(-)
 create mode 100644 apps/web2/src/app/_components/auth/logout-button.tsx
 delete mode 100644 apps/web2/src/app/_components/header/logo.tsx
 create mode 100644 apps/web2/src/app/_components/header/user.tsx
 create mode 100644 apps/web2/src/app/actions/logout.ts

diff --git a/apps/web2/src/app/_components/auth/logout-button.tsx b/apps/web2/src/app/_components/auth/logout-button.tsx
new file mode 100644
index 0000000..eef7062
--- /dev/null
+++ b/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>;
+};
diff --git a/apps/web2/src/app/_components/header/index.tsx b/apps/web2/src/app/_components/header/index.tsx
index 558e050..976936f 100644
--- a/apps/web2/src/app/_components/header/index.tsx
+++ b/apps/web2/src/app/_components/header/index.tsx
@@ -1,7 +1,16 @@
-import { Logo } from './logo';
+'use client';
 
-export const Header = () => (
-    <header className=" tw-flex tw-justify-center tw-items-center tw-pt-6 tw-max-h-24 tw-flex-auto">
-        <Logo />
-    </header>
-);
+import { useSession } from 'next-auth/react';
+
+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>
+    );
+};
diff --git a/apps/web2/src/app/_components/header/logo.tsx b/apps/web2/src/app/_components/header/logo.tsx
deleted file mode 100644
index e7f1d2e..0000000
--- a/apps/web2/src/app/_components/header/logo.tsx
+++ /dev/null
@@ -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>
-);
diff --git a/apps/web2/src/app/_components/header/user.tsx b/apps/web2/src/app/_components/header/user.tsx
new file mode 100644
index 0000000..60d294a
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/apps/web2/src/app/actions/logout.ts b/apps/web2/src/app/actions/logout.ts
new file mode 100644
index 0000000..97ffb88
--- /dev/null
+++ b/apps/web2/src/app/actions/logout.ts
@@ -0,0 +1,7 @@
+'use server';
+
+import { signOut } from '@/auth';
+
+export const logout = async () => {
+    await signOut();
+};