created profile page

donutshop_ecommerce/src/app/profile/page.js

@@ -0,0 +1,28 @@
+"use client"
+import { useSession } from 'next-auth/react'
+import { redirect } from 'next/navigation';
+import React from 'react'
+
+
+
+const ProfilePage = () => {
+    const session = useSession();
+    const {status} = session;
+    
+    if(status === 'loading'){
+        return 'Loading...'
+    }
+    if(status === 'unauthenticated'){
+        return redirect('/login');
+    }
+
+
+  return (
+    <div className='px-5'>
+        <p className='text-center text-2xl font-semibold uppercase mb-5 text-[#FF5580]'>Profile</p>
+        
+    </div>
+  )
+}
+
+export default ProfilePage

donutshop_ecommerce/src/components/layout/Header.js

@@ -15,7 +15,13 @@ const Header = () => {
 
     //use session
     const session = useSession();
-    const status = session.status;
+    const status = session?.status;
+    //use userdata
+    const userData = session.data?.user;
+    let userName = userData?.name || userData?.email;
+    if(userName && userName.includes(' ')){
+        userName = userName.split(' ')[0]
+    }
     
 
   return (
@@ -43,17 +49,17 @@ const Header = () => {
             </div>
             <div className='mt-3'>
                 <div className="flex justify-end md:justify-center items-center w-full text-white">
-                <ul className="hidden md:flex flex-row gap-5 text-xs font-semibold uppercase text-[#95743D] items-center">
+                <ul className="hidden md:flex flex-row gap-4 text-xs font-semibold uppercase text-[#95743D] items-center">
                     {status === 'authenticated' && (
                         <>
-                            <Link href={'/profile'}>Profile</Link>
+                            <Link href={'/profile'} className="text-gray-700 text-sm capitalize">{userName}</Link>
-                            <button onClick={() => signOut()} className="px-2 py-2 border border-[#DCA0AE] rounded-full hover:bg-[#DCA0AE] hover:text-white duration-300 uppercase">Logout</button>
+                            <button onClick={() => signOut()} className="px-4 py-2 border border-[#DCA0AE] rounded-full hover:bg-[#DCA0AE] hover:text-white duration-300 uppercase">Logout</button>
                         </>
                     )}
                     {status === 'unauthenticated' && (
                         <>
                             <Link href='/login' className="">Login</Link>
-                            <Link href='/register' className="px-2 py-2 border border-[#DCA0AE] rounded-full hover:bg-[#DCA0AE] hover:text-white duration-300">Register</Link>
+                            <Link href='/register' className="px-4 py-2 border border-[#DCA0AE] rounded-full hover:bg-[#DCA0AE] hover:text-white duration-300">Register</Link>
                         </>
                     )}