feat: add product detail page with components and infinite scroll

- Add SingleProduct component for product detail page
- Implement product data hooks and services
- Add infinite scroll functionality for products list
- Update ProductCard component with new features
- Add product types and specifications
- Fix TypeScript errors in product page
- Update profile page layout
- Add global CSS improvements
This commit is contained in:
hamid zarghami
2025-09-07 09:17:58 +03:30
parent 5ec2b621bc
commit 2995b11900
17 changed files with 667 additions and 343 deletions
+21 -15
View File
@@ -40,7 +40,6 @@ const ProfilePage = () => {
<Menu pageActive='profile' />
<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-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">
@@ -150,25 +149,32 @@ const ProfilePage = () => {
</div>
</div>
{/* 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 className='flex-1 flex lg:flex-row flex-col gap-6'>
<div className='flex flex-row lg:flex-col gap-3 sm:gap-4 lg:gap-6 flex-1'>
<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 className='text-xs sm:text-sm lg:text-base text-center'>
سفارشات
</div>
</div>
<div className='text-xs sm:text-sm lg:text-base text-center'>
سفارشات
<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 className='text-xs sm:text-sm lg:text-base text-center'>
علاقه مندی ها
</div>
</div>
</div>
<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 className='text-xs sm:text-sm lg:text-base text-center'>
علاقه مندی ها
</div>
<div className='flex-1 bg-red-50 '>
</div>
</div>
</div>
</div>
</div>