created user tabs

donutshop_ecommerce/src/app/api/models/User.js

@@ -34,6 +34,10 @@ const UserSchema = new Schema({
     country:{
         type: String,
     },
+    admin:{
+        type: Boolean,
+        default: false
+    }
 
 
 }, {timestamps: true});

donutshop_ecommerce/src/app/categories/page.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import UserTab from '../../components/layout/UserTab'
+
+const CategoriesPage = () => {
+  return (
+    <div className='px-5 mb-10 max-w-lg mx-auto'>
+        <UserTab isAdmin={true}/>
+        This is a category page
+    </div>
+  )
+}
+
+export default CategoriesPage

donutshop_ecommerce/src/app/globals.css

@@ -13,7 +13,6 @@ body{
 input[type="email"], input[type="password"], input[type="text"], input[type="tel"]{
   @apply border p-2 block my-2 w-full rounded-md outline-none border-[#DCA0AE]
 }
-
 /*===== strokel =====*/
 .text-stroke-3 {
   text-shadow: -1px -1px 0 #95743D, 2px -1px 0 #95743D, -1px 2px 0 #95743D, 1px 1px 0 #95743D;
@@ -33,7 +32,17 @@ input[type="email"], input[type="password"], input[type="text"], input[type="tel
 .letter {
   transform-origin: 0 50px;
 }
+/*===== profile =====*/
+div.tabs > *{
+  @apply py-2 px-4 bg-gray-200 text-gray-700 rounded-md
+}
+div.tabs > *.active{
+  @apply bg-pink-500 text-white font-semibold
+}
 
+
+
+/*=====Responsive=====*/
 @media (min-width: 765px){
   .letter {
     transform-origin: 0 70px;

donutshop_ecommerce/src/app/login/page.js

@@ -5,7 +5,6 @@ import React, { useState } from 'react'
 import { signIn } from "next-auth/react";
 
 
-
 const LoginPage = () => {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');

donutshop_ecommerce/src/app/profile/page.js

@@ -4,6 +4,7 @@ import Image from 'next/image';
 import { redirect } from 'next/navigation';
 import React, { useEffect, useState } from 'react'
 import toast from 'react-hot-toast';
+import UserTabs from "../../components/layout/UserTab"
 
 
 const ProfilePage = () => {
@@ -19,6 +20,8 @@ const ProfilePage = () => {
   const [stateProvince, setStateProvince] = useState('');
   const [zipCode, setZipCode] = useState('');
   const [country, setCountry] = useState('');
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [profileFetchd, setProfileFetched] = useState(false);
 
 
   useEffect(() => {
@@ -33,6 +36,8 @@ const ProfilePage = () => {
           setStateProvince(data.stateProvince);
           setZipCode(data.zipCode);
           setCountry(data.country);
+          setIsAdmin(data.admin);
+          setProfileFetched(true);
         })
       })
     }
@@ -87,8 +92,8 @@ const ProfilePage = () => {
     }
   }
 
-  if(status === 'loading'){
+  if(status === 'loading' || !profileFetchd){
-    return 'Loading...'
+    return <p className='flex justify-center items-center'>Loading...</p>
   }
   if(status === 'unauthenticated'){
     return redirect('/login');
@@ -98,8 +103,8 @@ const ProfilePage = () => {
 
   return (
     <div className='px-5 mb-10'>
-      <p className='text-center text-2xl font-semibold uppercase mb-5 text-[#FF5580]'>Profile</p>
+      <UserTabs isAdmin={isAdmin}/>
-      <div className='max-w-md mx-auto'>
+      <div className='max-w-md mx-auto mt-5'>
         <div className='flex flex-col gap-2 justify-center items-center max-w-[100px] mx-auto'>
           {image && (
             <Image src={image} width={100} height={100} alt={'user-image'} className='rounded-full'/>

donutshop_ecommerce/src/components/layout/UserTab.js

@@ -0,0 +1,24 @@
+"use client"
+import React from 'react'
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const UserTab = ({isAdmin}) => {
+    const path = usePathname();
+
+
+  return (
+    <div className='tabs flex gap-2 justify-center'>
+        <Link href='/profile' className={path === '/profile' ? 'active' : ''}>Profile</Link>
+        {isAdmin && (
+          <>
+            <Link href='/categories' className={path === '/categories' ? 'active' : ''}>Categories</Link>
+            <Link href='/menu-items' className={path === '/menu-items' ? 'active' : ''}>Items</Link>
+            <Link href='/users' className={path === '/users' ? 'active' : ''}>Users</Link>
+          </>
+        )}
+    </div>
+  )
+}
+
+export default UserTab