responsive

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
+20 -20
View File
@@ -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>