danak/shop-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive

Browse Source
This commit is contained in:
hamid zarghami
2025-09-03 15:06:15 +03:30
parent 138f26e293
commit d051e7110a
33 changed files with 440 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/profile/page.tsx
+20 -21
View File
@@ -36,22 +36,22 @@ const ProfilePage = () => {
}
return (
<div className="p-4 sm:p-6">
<div className="p-3 sm:p-4 md:p-6">
<Menu pageActive='profile' />
<div className='mt-6 sm:mt-8 md:mt-10'>
<div className="flex flex-col xl:flex-row gap-4 sm:gap-6">
<div className='mt-4 sm:mt-6 md:mt-8 lg:mt-10'>
<div className="flex flex-col lg:flex-row gap-4 sm:gap-6">
{/* Left Content - Form */}
<div className="flex-1 ">
<div className="bg-[#FAFAFA] rounded-lg p-4 sm:p-6">
<div className="flex-1">
<div className="bg-[#FAFAFA] rounded-lg p-3 sm:p-4 md:p-6">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-4 sm:mb-6 gap-3 sm:gap-0">
<h1 className="text-base sm:text-lg font-bold text-gray-900">اطلاعات کاربری</h1>
<Button
onClick={() => setIsEditing(!isEditing)}
variant="outline"
className="flex items-center gap-2"
className="flex items-center gap-2 text-sm sm:text-base"
>
<Edit2 size={16} />
ویرایش
<span className="hidden sm:inline">ویرایش</span>
</Button>
</div>
@@ -134,13 +134,14 @@ const ProfilePage = () => {
<div className="mt-4 sm:mt-6 flex flex-col sm:flex-row gap-3">
<Button
onClick={handleSubmit}
className="px-8 bg-blue-600 hover:bg-blue-700"
className="px-6 sm:px-8 bg-blue-600 hover:bg-blue-700 text-sm sm:text-base"
>
ذخیره تغییرات
</Button>
<Button
onClick={() => setIsEditing(false)}
variant="outline"
className="text-sm sm:text-base"
>
انصراف
</Button>
@@ -149,30 +150,28 @@ const ProfilePage = () => {
</div>
</div>
<div className='flex flex-row xl:flex-col gap-4 sm:gap-6'>
<div className='w-full xl:w-[240px] xl:h-[240px] bg-[#FAFAFA] rounded-[10px] flex flex-col gap-4 sm:gap-6 justify-center items-center h-[120px] sm:h-[160px] xl:h-[240px]'>
<div className='size-12 sm:size-16 xl:size-20 bg-[#F2F2F2] rounded-full flex justify-center items-center'>
<ShoppingCart size={24} color='#000' className='sm:w-8 sm:h-8 xl:w-10 xl:h-10' />
{/* Quick Actions Cards */}
<div className='flex flex-row lg:flex-col gap-3 sm:gap-4 lg:gap-6 lg:min-w-[200px]'>
<div className='flex-1 lg:w-full bg-[#FAFAFA] rounded-[10px] flex flex-col gap-3 sm:gap-4 lg:gap-6 justify-center items-center h-[100px] sm:h-[120px] lg:h-[160px] xl:h-[200px]'>
<div className='size-10 sm:size-12 lg:size-16 xl:size-20 bg-[#F2F2F2] rounded-full flex justify-center items-center'>
<ShoppingCart size={20} color='#000' className='sm:w-6 sm:h-6 lg:w-8 lg:h-8 xl:w-10 xl:h-10' />
</div>
<div>
<div className='text-xs sm:text-sm lg:text-base text-center'>
سفارشات
</div>
</div>
<div className='w-full xl:w-[240px] xl:h-[240px] bg-[#FAFAFA] rounded-[10px] flex flex-col gap-4 sm:gap-6 justify-center items-center h-[120px] sm:h-[160px] xl:h-[240px]'>
<div className='size-12 sm:size-16 xl:size-20 bg-[#F2F2F2] rounded-full flex justify-center items-center'>
<Heart size={24} color='#000' className='sm:w-8 sm:h-8 xl:w-10 xl:h-10' />
<div className='flex-1 lg:w-full bg-[#FAFAFA] rounded-[10px] flex flex-col gap-3 sm:gap-4 lg:gap-6 justify-center items-center h-[100px] sm:h-[120px] lg:h-[160px] xl:h-[200px]'>
<div className='size-10 sm:size-12 lg:size-16 xl:size-20 bg-[#F2F2F2] rounded-full flex justify-center items-center'>
<Heart size={20} color='#000' className='sm:w-6 sm:h-6 lg:w-8 lg:h-8 xl:w-10 xl:h-10' />
</div>
<div>
<div className='text-xs sm:text-sm lg:text-base text-center'>
علاقه مندی ها
</div>
</div>
</div>
<div className='w-full xl:w-[300px] min-h-[200px] xl:min-h-full bg-red-50 rounded-[10px] hidden xl:block'>
</div>
</div>
</div>
</div >
</div>
)
}