favorite page and comment page

src/app/profile/comments/page.tsx

@@ -0,0 +1,89 @@
+import withLayout from '@/hoc/withLayout'
+import { NextPage } from 'next'
+import Menu from '../components/Menu'
+import Image from 'next/image'
+
+const Comments: NextPage = () => {
+    return (
+        <div className='p-6'>
+            <Menu pageActive='comments' />
+
+            <div className='mt-14'>
+                <div className='flex gap-6 border-b border-border pb-6'>
+                    <Image
+                        src='https://picsum.photos/200/300'
+                        alt='comment'
+                        width={100}
+                        height={100}
+                        className='max-w-20 max-h-20 object-contain'
+                    />
+
+                    <div className='flex-1'>
+                        <div className='border-b border-border pb-4'>
+                            <div>
+                                نان بربری سنتی سبوس دار
+                            </div>
+                            <div className='mt-1.5 text-sm text-[#999999]'>
+                                2 آذر 1401
+                            </div>
+                        </div>
+
+                        <div className='mt-4 text-[#4C4C4C] text-sm'>
+                            خیلی راضیم از خریدم
+                        </div>
+                    </div>
+                </div>
+                <div className='flex gap-6 border-b border-border py-6'>
+                    <Image
+                        src='https://picsum.photos/200/300'
+                        alt='comment'
+                        width={100}
+                        height={100}
+                        className='max-w-20 max-h-20 object-contain'
+                    />
+
+                    <div className='flex-1'>
+                        <div className='border-b border-border pb-4'>
+                            <div>
+                                نان بربری سنتی سبوس دار
+                            </div>
+                            <div className='mt-1.5 text-sm text-[#999999]'>
+                                2 آذر 1401
+                            </div>
+                        </div>
+
+                        <div className='mt-4 text-[#4C4C4C] text-sm'>
+                            خیلی راضیم از خریدم
+                        </div>
+                    </div>
+                </div>
+                <div className='flex gap-6 border-b border-border py-6'>
+                    <Image
+                        src='https://picsum.photos/200/300'
+                        alt='comment'
+                        width={100}
+                        height={100}
+                        className='max-w-20 max-h-20 object-contain'
+                    />
+
+                    <div className='flex-1'>
+                        <div className='border-b border-border pb-4'>
+                            <div>
+                                نان بربری سنتی سبوس دار
+                            </div>
+                            <div className='mt-1.5 text-sm text-[#999999]'>
+                                2 آذر 1401
+                            </div>
+                        </div>
+
+                        <div className='mt-4 text-[#4C4C4C] text-sm'>
+                            خیلی راضیم از خریدم
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default withLayout(Comments)

src/app/profile/components/Menu.tsx

@@ -3,15 +3,21 @@ import MenuItem from './MenuItem'
 import { Button } from '@/components/ui/button'
 import { LogoutCurve } from 'iconsax-react'
 
-const Menu: FC = () => {
+type Props = {
+    pageActive: 'profile' | 'favorite' | 'comments' | 'chat' | 'orders'
+}
+
+const Menu: FC<Props> = (props) => {
+    const { pageActive } = props
+
     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' icon='user' text='پروفایل کاربری' isActive={pageActive === 'profile'} />
-                <MenuItem href='/profile/favorite' icon='heart' text='علاقه مندی ها' isActive={false} />
+                <MenuItem href='/profile/favorite' icon='heart' text='علاقه مندی ها' isActive={pageActive === 'favorite'} />
-                <MenuItem href='/profile/comments' icon='comment' text='نظرات من' isActive={false} />
+                <MenuItem href='/profile/comments' icon='comment' text='نظرات من' isActive={pageActive === 'comments'} />
-                <MenuItem href='/profile/chat' icon='chat' text='گفتگو' isActive={false} />
+                <MenuItem href='/profile/chat' icon='chat' text='گفتگو' isActive={pageActive === 'chat'} />
-                <MenuItem href='/profile/orders' icon='orders' text='سفارشات' isActive={false} />
+                <MenuItem href='/profile/orders' icon='orders' text='سفارشات' isActive={pageActive === 'orders'} />
             </div>
 
             <Button className='bg-[#F2F2F2] h-12'>

src/app/profile/favorite/page.tsx

@@ -0,0 +1,23 @@
+import withLayout from "@/hoc/withLayout"
+import { NextPage } from "next"
+import Menu from "../components/Menu"
+import GridWrapper from "@/components/GridWrapper"
+import ProductCard from "@/components/ProductCard"
+
+
+const FavoritePage: NextPage = () => {
+    return (
+        <div className="p-6">
+            <Menu pageActive='favorite' />
+
+            <GridWrapper desktop={5} mobile={2} className="mt-14">
+                <ProductCard />
+                <ProductCard />
+                <ProductCard />
+                <ProductCard />
+            </GridWrapper>
+        </div>
+    )
+}
+
+export default withLayout(FavoritePage)

src/app/profile/page.tsx

@@ -38,7 +38,7 @@ const ProfilePage = () => {
 
     return (
         <div className="p-6">
-            <Menu />
+            <Menu pageActive='profile' />
             <div className='mt-10'>
                 <div className="flex gap-6">
                     {/* Left Content - Form */}