menu profile

src/app/profile/components/Menu.tsx

@@ -0,0 +1,27 @@
+import { FC } from 'react'
+import MenuItem from './MenuItem'
+import { Button } from '@/components/ui/button'
+import { LogoutCurve } from 'iconsax-react'
+
+const Menu: FC = () => {
+    return (
+        <div className='h-20 flex justify-between items-center bg-[#FAFAFA] rounded-[10px] border border-border px-10'>
+            <div className='flex gap-10'>
+                <MenuItem href='/profile' icon='user' text='پروفایل کاربری' isActive={true} />
+                <MenuItem href='/profile/favorite' icon='heart' text='علاقه مندی ها' isActive={false} />
+                <MenuItem href='/profile/comments' icon='comment' text='نظرات من' isActive={false} />
+                <MenuItem href='/profile/chat' icon='chat' text='گفتگو' isActive={false} />
+                <MenuItem href='/profile/orders' icon='orders' text='سفارشات' isActive={false} />
+            </div>
+
+            <Button className='bg-[#F2F2F2] h-12'>
+                <div className='flex itesm-center gap-2 text-[#AD3434]'>
+                    <LogoutCurve className='min-size-5 size-5' color='#AD3434' />
+                    <div className='text-sm font-light'>خروج از حساب</div>
+                </div>
+            </Button>
+        </div>
+    )
+}
+
+export default Menu

src/app/profile/components/MenuItem.tsx

@@ -0,0 +1,51 @@
+import { PRIMARY_COLOR } from '@/config/const'
+import { clx } from '@/helpers/utils'
+import { Heart, Message, MessageText1, ShoppingCart, UserSquare } from 'iconsax-react'
+import Link from 'next/link'
+import { FC } from 'react'
+
+type Props = {
+    icon: 'user' | 'heart' | 'comment' | 'chat' | 'orders',
+    isActive: boolean,
+    text: string,
+    href: string
+}
+
+const MenuItem: FC<Props> = (props) => {
+
+    const { icon, isActive, text, href } = props
+
+    const color = isActive ? PRIMARY_COLOR : '#7F7F7F'
+
+    const Icon = () => {
+        switch (icon) {
+            case 'user':
+                return <UserSquare size={20} color={color} />
+            case 'heart':
+                return <Heart size={20} color={color} />
+            case 'comment':
+                return <Message size={20} color={color} />
+            case 'chat':
+                return <MessageText1 size={20} color={color} />
+            case 'orders':
+                return <ShoppingCart size={20} color={color} />
+        }
+    }
+
+    return (
+        <Link href={href} className={clx(
+            'h-full min-h-20 w-fit px-2 border-b border-primary flex items-center gap-4',
+            isActive ? 'border-b-primary' : 'border-b-transparent'
+        )}>
+            <Icon />
+            <div className={clx(
+                'text-sm',
+                isActive ? 'text-primary' : 'text-[#7F7F7F]'
+            )}>
+                {text}
+            </div>
+        </Link>
+    )
+}
+
+export default MenuItem

src/app/profile/page.tsx

@@ -5,6 +5,7 @@ import Input from '@/components/Input'
 import { Edit2 } from 'lucide-react'
 import withLayout from '@/hoc/withLayout'
 import { Heart, ShoppingCart } from 'iconsax-react'
+import Menu from './components/Menu'
 
 const ProfilePage = () => {
     const [userInfo, setUserInfo] = useState({
@@ -37,7 +38,8 @@ const ProfilePage = () => {
 
     return (
         <div className="p-6">
-            <div>
+            <Menu />
+            <div className='mt-10'>
                 <div className="flex gap-6">
                     {/* Left Content - Form */}
                     <div className="flex-1 ">
@@ -171,7 +173,7 @@ const ProfilePage = () => {
                     </div>
                 </div>
             </div>
-        </div>
+        </div >
     )
 }
 

src/components/ui/button.tsx

@@ -11,7 +11,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+          "bg-primary text-primary-foreground shadow-xs hover:opacity-80",
         destructive:
           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline: