responsive
This commit is contained in:
hamid zarghami
@@ -5,78 +5,78 @@ import Image from 'next/image'
|
||||
|
||||
const Comments: NextPage = () => {
|
||||
return (
|
||||
<div className='p-6'>
|
||||
<div className='p-3 sm:p-4 md:p-6'>
|
||||
<Menu pageActive='comments' />
|
||||
|
||||
<div className='mt-14'>
|
||||
<div className='flex gap-6 border-b border-border pb-6'>
|
||||
<div className='mt-6 sm:mt-8 md:mt-10 lg:mt-14'>
|
||||
<div className='flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-6 border-b border-border pb-4 sm:pb-6'>
|
||||
<Image
|
||||
src='https://picsum.photos/200/300'
|
||||
alt='comment'
|
||||
width={100}
|
||||
height={100}
|
||||
className='max-w-20 max-h-20 object-contain'
|
||||
className='max-w-16 sm:max-w-20 max-h-16 sm:max-h-20 object-contain mx-auto sm:mx-0'
|
||||
/>
|
||||
|
||||
<div className='flex-1'>
|
||||
<div className='border-b border-border pb-4'>
|
||||
<div>
|
||||
<div className='border-b border-border pb-3 sm:pb-4'>
|
||||
<div className='text-sm sm:text-base'>
|
||||
نان بربری سنتی سبوس دار
|
||||
</div>
|
||||
<div className='mt-1.5 text-sm text-[#999999]'>
|
||||
<div className='mt-1.5 text-xs sm:text-sm text-[#999999]'>
|
||||
2 آذر 1401
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 text-[#4C4C4C] text-sm'>
|
||||
<div className='mt-3 sm:mt-4 text-[#4C4C4C] text-xs sm:text-sm'>
|
||||
خیلی راضیم از خریدم
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-6 border-b border-border py-6'>
|
||||
<div className='flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-6 border-b border-border py-4 sm:py-6'>
|
||||
<Image
|
||||
src='https://picsum.photos/200/300'
|
||||
alt='comment'
|
||||
width={100}
|
||||
height={100}
|
||||
className='max-w-20 max-h-20 object-contain'
|
||||
className='max-w-16 sm:max-w-20 max-h-16 sm:max-h-20 object-contain mx-auto sm:mx-0'
|
||||
/>
|
||||
|
||||
<div className='flex-1'>
|
||||
<div className='border-b border-border pb-4'>
|
||||
<div>
|
||||
<div className='border-b border-border pb-3 sm:pb-4'>
|
||||
<div className='text-sm sm:text-base'>
|
||||
نان بربری سنتی سبوس دار
|
||||
</div>
|
||||
<div className='mt-1.5 text-sm text-[#999999]'>
|
||||
<div className='mt-1.5 text-xs sm:text-sm text-[#999999]'>
|
||||
2 آذر 1401
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 text-[#4C4C4C] text-sm'>
|
||||
<div className='mt-3 sm:mt-4 text-[#4C4C4C] text-xs sm:text-sm'>
|
||||
خیلی راضیم از خریدم
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-6 border-b border-border py-6'>
|
||||
<div className='flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-6 border-b border-border py-4 sm:py-6'>
|
||||
<Image
|
||||
src='https://picsum.photos/200/300'
|
||||
alt='comment'
|
||||
width={100}
|
||||
height={100}
|
||||
className='max-w-20 max-h-20 object-contain'
|
||||
className='max-w-16 sm:max-w-20 max-h-16 sm:max-h-20 object-contain mx-auto sm:mx-0'
|
||||
/>
|
||||
|
||||
<div className='flex-1'>
|
||||
<div className='border-b border-border pb-4'>
|
||||
<div>
|
||||
<div className='border-b border-border pb-3 sm:pb-4'>
|
||||
<div className='text-sm sm:text-base'>
|
||||
نان بربری سنتی سبوس دار
|
||||
</div>
|
||||
<div className='mt-1.5 text-sm text-[#999999]'>
|
||||
<div className='mt-1.5 text-xs sm:text-sm text-[#999999]'>
|
||||
2 آذر 1401
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 text-[#4C4C4C] text-sm'>
|
||||
<div className='mt-3 sm:mt-4 text-[#4C4C4C] text-xs sm:text-sm'>
|
||||
خیلی راضیم از خریدم
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -11,21 +11,47 @@ 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={pageActive === 'profile'} />
|
||||
<MenuItem href='/profile/favorite' icon='heart' text='علاقه مندی ها' isActive={pageActive === 'favorite'} />
|
||||
<MenuItem href='/profile/comments' icon='comment' text='نظرات من' isActive={pageActive === 'comments'} />
|
||||
<MenuItem href='/profile/chat' icon='chat' text='گفتگو' isActive={pageActive === 'chat'} />
|
||||
<MenuItem href='/profile/orders' icon='orders' text='سفارشات' isActive={pageActive === 'orders'} />
|
||||
<div className='bg-[#FAFAFA] rounded-[10px] border border-border'>
|
||||
{/* Mobile Layout */}
|
||||
<div className='block sm:hidden'>
|
||||
<div className='flex overflow-x-auto scrollbar-hide p-3'>
|
||||
<div className='flex gap-2 min-w-max'>
|
||||
<MenuItem href='/profile' icon='user' text='پروفایل کاربری' isActive={pageActive === 'profile'} />
|
||||
<MenuItem href='/profile/favorite' icon='heart' text='علاقه مندی ها' isActive={pageActive === 'favorite'} />
|
||||
<MenuItem href='/profile/comments' icon='comment' text='نظرات من' isActive={pageActive === 'comments'} />
|
||||
<MenuItem href='/profile/chat' icon='chat' text='گفتگو' isActive={pageActive === 'chat'} />
|
||||
<MenuItem href='/profile/orders' icon='orders' text='سفارشات' isActive={pageActive === 'orders'} />
|
||||
|
||||
{/* Logout Button in Mobile */}
|
||||
<div className='flex-shrink-0 ml-2'>
|
||||
<Button className='bg-[#F2F2F2] h-12 px-3'>
|
||||
<div className='flex items-center gap-2 text-[#AD3434]'>
|
||||
<LogoutCurve className='size-4' color='#AD3434' />
|
||||
<div className='text-xs font-light'>خروج</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button className='bg-[#F2F2F2] h-12'>
|
||||
<div className='flex itesm-center gap-2 text-[#AD3434]'>
|
||||
<LogoutCurve className='min-size-5 size-5' color='#AD3434' />
|
||||
<div className='text-sm font-light'>خروج از حساب</div>
|
||||
{/* Desktop Layout */}
|
||||
<div className='hidden sm:flex h-20 justify-between items-center px-6 lg:px-10'>
|
||||
<div className='flex gap-4 lg:gap-6 xl:gap-10'>
|
||||
<MenuItem href='/profile' icon='user' text='پروفایل کاربری' isActive={pageActive === 'profile'} />
|
||||
<MenuItem href='/profile/favorite' icon='heart' text='علاقه مندی ها' isActive={pageActive === 'favorite'} />
|
||||
<MenuItem href='/profile/comments' icon='comment' text='نظرات من' isActive={pageActive === 'comments'} />
|
||||
<MenuItem href='/profile/chat' icon='chat' text='گفتگو' isActive={pageActive === 'chat'} />
|
||||
<MenuItem href='/profile/orders' icon='orders' text='سفارشات' isActive={pageActive === 'orders'} />
|
||||
</div>
|
||||
</Button>
|
||||
|
||||
<Button className='bg-[#F2F2F2] h-12'>
|
||||
<div className='flex items-center gap-2 text-[#AD3434]'>
|
||||
<LogoutCurve className='size-5' color='#AD3434' />
|
||||
<div className='text-sm font-light'>خروج از حساب</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -34,12 +34,12 @@ const MenuItem: FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<Link href={href} className={clx(
|
||||
'h-full min-h-20 w-fit px-2 border-b border-primary flex items-center gap-4',
|
||||
'h-12 sm:h-16 lg:h-20 w-fit px-2 sm:px-3 lg:px-4 border-b-2 border-primary flex items-center gap-2 sm:gap-3 lg:gap-4 whitespace-nowrap flex-shrink-0',
|
||||
isActive ? 'border-b-primary' : 'border-b-transparent'
|
||||
)}>
|
||||
<Icon />
|
||||
<div className={clx(
|
||||
'text-sm',
|
||||
'text-xs sm:text-sm',
|
||||
isActive ? 'text-primary' : 'text-[#7F7F7F]'
|
||||
)}>
|
||||
{text}
|
||||
|
||||
@@ -7,10 +7,10 @@ import ProductCard from "@/components/ProductCard"
|
||||
|
||||
const FavoritePage: NextPage = () => {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="p-3 sm:p-4 md:p-6">
|
||||
<Menu pageActive='favorite' />
|
||||
|
||||
<GridWrapper desktop={5} mobile={2} className="mt-14">
|
||||
<GridWrapper desktop={5} mobile={2} className="mt-6 sm:mt-8 md:mt-10 lg:mt-14">
|
||||
<ProductCard />
|
||||
<ProductCard />
|
||||
<ProductCard />
|
||||
|
||||
@@ -51,23 +51,23 @@ const Orders: NextPage = () => {
|
||||
]
|
||||
|
||||
return (
|
||||
<div className='p-6'>
|
||||
<div className='p-3 sm:p-4 md:p-6'>
|
||||
<Menu pageActive='orders' />
|
||||
|
||||
{/* Tabs */}
|
||||
<div className='mt-14 border-b border-gray-200'>
|
||||
<div className='flex gap-8'>
|
||||
<div className='mt-6 sm:mt-8 md:mt-10 lg:mt-14 border-b border-gray-200'>
|
||||
<div className='flex gap-2 sm:gap-4 lg:gap-8 overflow-x-auto'>
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
className={`pb-4 px-2 border-b-2 transition-colors ${activeTab === tab.key
|
||||
className={`pb-3 sm:pb-4 px-1 sm:px-2 border-b-2 transition-colors whitespace-nowrap ${activeTab === tab.key
|
||||
? 'border-primary text-primary'
|
||||
: 'border-transparent text-gray-600 hover:text-gray-800'
|
||||
}`}
|
||||
>
|
||||
<span className='ml-2'>{tab.label}</span>
|
||||
<span className={`inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs rounded-full ${activeTab === tab.key
|
||||
<span className='ml-1 sm:ml-2 text-xs sm:text-sm'>{tab.label}</span>
|
||||
<span className={`inline-flex items-center justify-center min-w-[16px] sm:min-w-[20px] h-4 sm:h-5 px-1 sm:px-1.5 text-xs rounded-full ${activeTab === tab.key
|
||||
? 'bg-primary text-white'
|
||||
: 'bg-gray-200 text-gray-600'
|
||||
}`}>
|
||||
@@ -79,61 +79,58 @@ const Orders: NextPage = () => {
|
||||
</div>
|
||||
|
||||
{/* Orders List */}
|
||||
<div className='mt-6 space-y-4'>
|
||||
<div className='mt-4 sm:mt-6 space-y-3 sm:space-y-4'>
|
||||
{mockOrders.map((order) => (
|
||||
<div key={order.id} className='bg-white border border-[#E0E0E0] rounded-[8px] p-5'>
|
||||
<div className='flex gap-6'>
|
||||
<div className='max-w-[234px]'>
|
||||
<div key={order.id} className='bg-white border border-[#E0E0E0] rounded-[8px] p-3 sm:p-4 md:p-5'>
|
||||
<div className='flex flex-col lg:flex-row gap-4 sm:gap-6'>
|
||||
<div className='lg:max-w-[234px] w-full'>
|
||||
<div className=''>
|
||||
<div className='text-sm text-[#7F7F7F] mb-1'>
|
||||
<div className='text-xs sm:text-sm text-[#7F7F7F] mb-1'>
|
||||
شماره سفارش: <span className='text-black'> {order.id}</span>
|
||||
</div>
|
||||
<div className='text-sm text-[#7F7F7F] mt-4'>
|
||||
<div className='text-xs sm:text-sm text-[#7F7F7F] mt-3 sm:mt-4'>
|
||||
مبلغ: <span className='text-black'> {order.amount} تومان</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-6 mt-4'>
|
||||
<div className='text-sm text-[#7F7F7F]'>
|
||||
<div className='mb-4 sm:mb-6 mt-3 sm:mt-4'>
|
||||
<div className='text-xs sm:text-sm text-[#7F7F7F]'>
|
||||
وضعیت سفارش : <span className='text-black'>{order.status}</span>
|
||||
</div>
|
||||
<div className='text-sm text-[#7F7F7F] mt-4'>
|
||||
<div className='text-xs sm:text-sm text-[#7F7F7F] mt-3 sm:mt-4'>
|
||||
تاریخ ثبت سفارش: <span className='text-black'> {order.date}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-3'>
|
||||
<div className='flex flex-col sm:flex-row gap-2 sm:gap-3'>
|
||||
<Button
|
||||
variant="outline"
|
||||
className='px-6 py-2 h-9 border-[#E0E0E0] text-[#666666] hover:bg-gray-50'
|
||||
className='px-4 sm:px-6 py-2 h-8 sm:h-9 border-[#E0E0E0] text-[#666666] hover:bg-gray-50 text-xs sm:text-sm'
|
||||
>
|
||||
جزئیات سفارش
|
||||
</Button>
|
||||
<Button className='bg-primary hover:bg-primary/80 px-6 py-2 h-9 text-white'>
|
||||
<Button className='bg-primary hover:bg-primary/80 px-4 sm:px-6 py-2 h-8 sm:h-9 text-white text-xs sm:text-sm'>
|
||||
پرداخت
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className='flex-1 flex gap-4 border-r border-border pr-5 overflow-hidden min-h-[225px]'>
|
||||
|
||||
<div className='flex-1 flex gap-3 sm:gap-4 lg:border-r lg:border-border lg:pr-5 overflow-hidden min-h-[200px] sm:min-h-[225px]'>
|
||||
<Swiper
|
||||
spaceBetween={16}
|
||||
spaceBetween={12}
|
||||
slidesPerView={'auto'}
|
||||
className='h-full w-full'
|
||||
grabCursor={true}
|
||||
>
|
||||
{order.products.map((product) => (
|
||||
<SwiperSlide key={product.id} className='!w-[234px]'>
|
||||
<div className='flex w-[234px] h-[224px] flex-col p-7 items-center rounded-xl gap-2 border border-border'>
|
||||
<Image src={product.image} className='max-w-[140px] max-h-[140px] object-center' alt={product.name} width={100} height={100} />
|
||||
<div className='max-w-[200px] text-center text-sm font-light mt-4'>{product.name}</div>
|
||||
<SwiperSlide key={product.id} className='!w-[180px] sm:!w-[200px] lg:!w-[234px]'>
|
||||
<div className='flex w-[180px] sm:w-[200px] lg:w-[234px] h-[180px] sm:h-[200px] lg:h-[224px] flex-col p-4 sm:p-5 lg:p-7 items-center rounded-xl gap-2 border border-border'>
|
||||
<Image src={product.image} className='max-w-[100px] sm:max-w-[120px] lg:max-w-[140px] max-h-[100px] sm:max-h-[120px] lg:max-h-[140px] object-center' alt={product.name} width={100} height={100} />
|
||||
<div className='max-w-[160px] sm:max-w-[180px] lg:max-w-[200px] text-center text-xs sm:text-sm font-light mt-2 sm:mt-4'>{product.name}</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+20
-21
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user