add: profile index page

src/app/globals.css

@@ -88,6 +88,10 @@ input[type="password"] {
   background: #555;
 }
 
+.box-shadow-normal {
+  box-shadow: 0px 2px 16px 0px #00000014;
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);

src/app/profile/layout.tsx

@@ -5,9 +5,9 @@ import { ReactQueryProvider } from '@/components/providers/ReactQueryProvider'
 export default function ProfileLayout({ children }: { children: React.ReactNode }) {
     return (
         <ReactQueryProvider>
-            <div className="h-full">
+            <main className="h-full p-4">
                 {children}
-            </div>
+            </main>
         </ReactQueryProvider>
     )
 }

src/app/profile/page.tsx

@@ -1,28 +1,87 @@
 "use client";
 
-import { useProfile } from '@/hooks/auth/useProfile';
-import { useAuthStore } from '@/zustand/authStore';
-import React, { useEffect } from 'react'
+import Button from '@/components/button/PrimaryButton';
+// import { useProfile } from '@/hooks/auth/useProfile';
+// import { useAuthStore } from '@/zustand/authStore';
+import { ArrowLeft, Calendar2, CallCalling, Profile, Sms, Verify } from 'iconsax-react';
+import Image from 'next/image';
+import React from 'react'
 
 type Props = object
 
 function ProfileIndex({ }: Props) {
-    const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+    // const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
 
-    const { mutate, data, isPending } = useProfile();
+    // const { mutate, data, isPending } = useProfile();
 
-    useEffect(() => {
-        if (isAuthenticated) {
-            mutate();
-        }
-    }, [isAuthenticated])
+    // useEffect(() => {
+    //     if (isAuthenticated) {
+    //         mutate();
+    //     }
+    //     // eslint-disable-next-line react-hooks/exhaustive-deps
+    // }, [isAuthenticated])
 
     return (
-        <div>
-            {isPending && 'Loading...'}
-            <br />
-            {data && JSON.stringify(data)}
-        </div>
+        <>
+            <div className='relative text-center'>
+                <div className='font-bold text-sm2 leading-6'>پروفایل کاربری</div>
+                <button className='absolute top-0 left-0'>
+                    <ArrowLeft size={24} className='stroke-foreground' />
+                </button>
+            </div>
+
+            <div className="mt-9 rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
+
+                <div className="">
+                    <div className="flex items-center justify-start gap-4 pb-6 border-b-[1.5px] border-border">
+                        <Image
+                            src={'/assets/images/user-avatar.png'}
+                            className='rounded-full'
+                            alt='user avatar'
+                            width={80}
+                            height={80}
+                        />
+                        <div className='block'>
+                            <div className='font-medium text-base '>علیرضا عابدزاده</div>
+                            <div className='text-xs text-primary mt-3 inline-flex items-center gap-2'>
+                                <Verify size={16} className='stroke-primary mb-0.5' />
+                                <span>
+                                    شناسه کاربری:
+                                </span>
+                                <span>2162165</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="grid gap-6 mt-6">
+                        <div className='inline-flex items-center gap-2.5'>
+                            <CallCalling size={16} className='stroke-disabled2 mb-0.5' />
+                            <span className='text-sm2 text-disabled2'>شماره همراه:</span>
+                            <span className='text-sm2'>09010901738</span>
+                        </div>
+                        <div className='inline-flex items-center gap-2.5'>
+                            <Sms size={16} className='stroke-disabled2 mb-0.5' />
+                            <span className='text-sm2 text-disabled2'>ایمیل:</span>
+                            <span className='text-sm2'>alirezaabed@gmail.com</span>
+                        </div>
+                        <div className='inline-flex items-center gap-2.5'>
+                            <Calendar2 size={16} className='stroke-disabled2 mb-0.5' />
+                            <span className='text-sm2 text-disabled2'>تاریخ تولد:</span>
+                            <span className='text-sm2'>1375/5/14</span>
+                        </div>
+                        <div className='inline-flex items-center gap-2.5'>
+                            <Profile size={16} className='stroke-disabled2 mb-0.5' />
+                            <span className='text-sm2 text-disabled2'>جنسیت:</span>
+                            <span className='text-sm2'>آقا</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='w-full text-center mt-6'>
+                    <Button>ویرایش اطلاعات</Button>
+                </div>
+            </div>
+        </>
     )
 }