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:
+21
-15
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user