feat: logout component

components/Logout.js

@@ -0,0 +1,28 @@
+import { useRouter } from "next/navigation";
+import { useDispatch } from "react-redux";
+import { userLogout } from "store/slices/authSlice";
+import { Icons } from "components";
+import alert from "utils/alert";
+
+export default function Logout() {
+  const dispatch = useDispatch();
+  const router = useRouter();
+
+  const handleLogout = () => {
+    router.push("/");
+    dispatch(userLogout());
+    alert("success", "退出成功");
+  };
+  return (
+    <div className='transition-colors hover:bg-gray-200 px-3'>
+
+      <div role='button'
+        className='flex justify-between cursor-pointer py-4 gap-x-2 mx-4  border-t border-gray-300'
+        onClick={() => handleLogout()}
+      >
+        <Icons.Logout className='icon text-black' />
+        <span className='ml-auto mr-3'>其他组织者</span>
+      </div>
+    </div>
+  );
+}

components/Navbar.js

@@ -33,7 +33,7 @@ export default function Navbar() {
         <div className='inline-flex gap-x-10 justify-between py-2 w-full items-center border-b lg:border-b-0'>
           <Search />
           <div className='inline-flex items-center gap-x-4 '>
-            <User user={user} dispatch={dispatch} />
+            <User user={user} />
             <span className='hiden lg:block lg:border lg:border-gray-300 lg:h-6'></span>
             <Cart />
           </div>

components/User.js

@@ -2,8 +2,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { useState } from "react";
 
-import { Icons } from "components";
-import { userLogout } from "store/slices/authSlice";
+import { Icons, Logout, BoxLink } from "components";
 
 export default function User({ user, dispatch }) {
   const [isOpen, setIsOpen] = useState(false);
@@ -35,40 +34,23 @@ export default function User({ user, dispatch }) {
         </Link>
       </div>
       <div
-        className={`hidden lg:relative lg:flex lg:rounded lg:p-1.5 lg:transition ${
+        className={`hidden lg:cursor-pointer lg:relative lg:flex lg:rounded lg:p-1.5 lg:transition ${
           isOpen && "bg-red-100"
         }`}
         onClick={() => setIsOpen(!isOpen)}
       >
         <Icons.User className='icon' />
         <Icons.ArrowDown className='icon ' />
         <div
-          className={` bg-white shadow-md px-3 py-2 absolute top-full left-0 w-56 border border-gray-100 space-y-3 ${
-            isOpen ? "block" : "hidden"
-          }`}
+          className={` bg-white shadow-md rounded overflow-hidden absolute top-full left-0 w-60 
+          border border-gray-100 ${isOpen ? "block" : "hidden"}`}
         >
-          <Link href='/profile' passHref>
-            <span className='flex items-center py-3 border-b border-gray-200 gap-x-2'>
-              <div className='relative w-6 h-6'>
-                <Image
-                  src={"/images/person.png"}
-                  width={500}
-                  height={500}
-                  alt="Picture of the author"
-                />
-              </div>
-              <span className='min-w-max'>{user.name}</span>
-              <Icons.ArrowLeft className='icon mr-auto' />
-            </span>
-          </Link>
-
-          <button
-            className='flex items-center py-3 gap-x-2'
-            onClick={() => dispatch(userLogout())}
-          >
-            <Icons.Logout className='icon' />
-            注销用户帐户
-          </button>
+          <BoxLink path='/profile' name={user.name} className='border-t-0'>
+            <div className='relative w-6 h-6'>
+              <Image src={user.avatar} layout='fill' />
+            </div>
+          </BoxLink>
+          <Logout />
         </div>
       </div>
     </>

components/index.js

@@ -9,3 +9,7 @@ export { default as RefreshTokenHandler } from "./RefreshTokenHandler";
 export { default as ClientLayout } from "./Lyouts/ClientLayout";
 export { default as ProfileLayout } from "./Lyouts/ProfileLayout";
 export { default as DashboardLayout } from "./Lyouts/DashboardLayout";
+// export { default as Orders } from "./Orders";
+export { default as Logout } from "./Logout";
+export { default as ArrowLink } from "./share/ArrowLink";
+export { default as BoxLink } from "./share/BoxLink";

components/share/ArrowLink.js

@@ -0,0 +1,15 @@
+import Link from "next/link";
+import { Icons } from "components";
+
+const ArrowLink = ({ children, path }) => {
+  return (
+    <Link href={path}>
+      <span className='inline-flex items-center text-blue-400 text-sm max-w-max '>
+        <span className='uppercase'>{children}</span>
+        <Icons.ArrowLeft className='icon text-blue-400' />
+      </span>
+    </Link>
+  );
+};
+
+export default ArrowLink;

components/share/BoxLink.js

@@ -0,0 +1,23 @@
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Icons } from "components";
+
+export default function BoxLink({ children, path, name }) {
+  const router = useRouter();
+
+  return (
+    <div
+      className={`transition-colors hover:bg-gray-200 px-3 ${
+        router.asPath === path && "border-r-4 border-red-600"
+      }`}
+    >
+      <Link href={path}>
+        <span className='flex justify-between mx-4 py-4 gap-x-2 border-t border-gray-300'>
+          {children}
+          <span className='ml-auto mr-3'>{name}</span>
+          <Icons.ArrowLeft className='icon' />
+        </span>
+      </Link>
+    </div>
+  );
+}

next.config.js

@@ -6,6 +6,16 @@ const nextConfig = {
     ACCESS_TOKEN_SECRET: "h1n0U6LHJtCZuWitwjn3oLd5qCRIgUFtemnjTrpfZLzVZ3ff0f",
     REFRESH_TOKEN_SECRET: "q5*a8Swj9u8e5Wf'Wv1fA!Pz8TQ#S2!mKAwuFz29HqLeOeJSA",
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'blog.huanghanlian.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
 }
 
 module.exports = nextConfig