responsive
This commit is contained in:
hamid zarghami
@@ -16,65 +16,68 @@ const CartItem: FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<div className={clx(
|
||||
'p-10 flex gap-10 border-t border-border',
|
||||
'p-4 sm:p-6 lg:p-10 flex flex-col sm:flex-row gap-4 sm:gap-6 lg:gap-10 border-t border-border',
|
||||
noBorder && 'border-0'
|
||||
)}>
|
||||
<Image
|
||||
src={'https://dkstatics-public.digikala.com/digikala-products/40026b18c2b053ac4a68c3288556dc899a77aecd_1727277566.jpg?x-oss-process=image/resize,m_lfit,h_300,w_300/format,webp/quality,q_80'}
|
||||
alt=''
|
||||
width={200}
|
||||
height={200}
|
||||
className='max-w-[150px] max-h-[150px] object-contain'
|
||||
/>
|
||||
<div className="flex-shrink-0 flex justify-center sm:justify-start">
|
||||
<Image
|
||||
src={'https://dkstatics-public.digikala.com/digikala-products/40026b18c2b053ac4a68c3288556dc899a77aecd_1727277566.jpg?x-oss-process=image/resize,m_lfit,h_300,w_300/format,webp/quality,q_80'}
|
||||
alt=''
|
||||
width={200}
|
||||
height={200}
|
||||
className='w-24 h-24 sm:w-32 sm:h-32 lg:max-w-[150px] lg:max-h-[150px] object-contain'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex-1'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div className='max-w-[250px] truncate'>
|
||||
<div className='flex-1 min-w-0'>
|
||||
<div className='flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 sm:gap-4'>
|
||||
<div className='text-sm sm:text-base font-medium leading-relaxed sm:max-w-[250px] sm:truncate'>
|
||||
گوشی موبایل سامسونگ مدل Galaxy S24 Ultra دو سیم کارت ظرفیت 1 ترابایت و رم 12 گیگابایت - ویتنام
|
||||
</div>
|
||||
<div>
|
||||
70,400,000 <span className='text-xs'>تومان</span>
|
||||
<div className="text-lg sm:text-xl font-semibold text-primary">
|
||||
70,400,000 <span className='text-xs sm:text-sm'>تومان</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='font-light text-[#333333]'>
|
||||
<div className='flex items-center gap-2.5 mt-14'>
|
||||
<div className='w-6'>
|
||||
<div className='size-[14px] rounded-full bg-black'></div>
|
||||
|
||||
<div className='font-light text-[#333333] mt-4 sm:mt-6 lg:mt-14'>
|
||||
<div className='flex items-center gap-2.5 mb-3 sm:mb-4'>
|
||||
<div className='w-5 sm:w-6 flex-shrink-0'>
|
||||
<div className='size-3 sm:size-[14px] rounded-full bg-black'></div>
|
||||
</div>
|
||||
<div className='text-sm'>مشکی</div>
|
||||
<div className='text-xs sm:text-sm'>مشکی</div>
|
||||
</div>
|
||||
|
||||
<div className='flex items-center gap-2.5 mt-4'>
|
||||
<div className='w-6'>
|
||||
<Shop size={20} color='#333333' />
|
||||
<div className='flex items-center gap-2.5 mb-3 sm:mb-4'>
|
||||
<div className='w-5 sm:w-6 flex-shrink-0'>
|
||||
<Shop size={16} color='#333333' className="sm:w-5 sm:h-5" />
|
||||
</div>
|
||||
<div className='text-sm'>فروشنده فروشگاه سندس</div>
|
||||
<div className='text-xs sm:text-sm'>فروشنده فروشگاه سندس</div>
|
||||
</div>
|
||||
|
||||
<div className='flex items-center gap-2.5 mt-4'>
|
||||
<div className='w-6'>
|
||||
<ArchiveTick size={20} color='#333333' />
|
||||
<div className='flex items-center gap-2.5 mb-4 sm:mb-6'>
|
||||
<div className='w-5 sm:w-6 flex-shrink-0'>
|
||||
<ArchiveTick size={16} color='#333333' className="sm:w-5 sm:h-5" />
|
||||
</div>
|
||||
<div className='text-sm'>گارانتی اصالت و سلامت فیزیکی کالا</div>
|
||||
<div className='text-xs sm:text-sm'>گارانتی اصالت و سلامت فیزیکی کالا</div>
|
||||
</div>
|
||||
|
||||
<div className='flex justify-between'>
|
||||
<div className='flex items-center gap-2.5 mt-4'>
|
||||
<div className='w-6'>
|
||||
<TruckFast size={20} color='blue' />
|
||||
<div className='flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4'>
|
||||
<div className='flex items-center gap-2.5'>
|
||||
<div className='w-5 sm:w-6 flex-shrink-0'>
|
||||
<TruckFast size={16} color='blue' className="sm:w-5 sm:h-5" />
|
||||
</div>
|
||||
<div className='text-sm'>ارسال از سندس حداکثر پس از 3 روز کاری</div>
|
||||
<div className='text-xs sm:text-sm'>ارسال از سندس حداکثر پس از 3 روز کاری</div>
|
||||
</div>
|
||||
|
||||
<CartControls
|
||||
onChange={() => null}
|
||||
onRemove={() => null}
|
||||
quantity={1}
|
||||
/>
|
||||
|
||||
<div className="flex justify-center sm:justify-end">
|
||||
<CartControls
|
||||
onChange={() => null}
|
||||
onRemove={() => null}
|
||||
quantity={1}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
+13
-12
@@ -7,29 +7,30 @@ import { NextPage } from "next"
|
||||
|
||||
const Cart: NextPage = () => {
|
||||
return (
|
||||
<div className="mt-14 px-4 sm:px-8 md:px-20">
|
||||
<div className="border-b border-border flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0">
|
||||
<div className="flex items-center gap-2 sm:gap-3 pb-4 sm:pb-6 border-b-2 border-primary relative top-[1px]">
|
||||
<div className="text-sm sm:text-base">
|
||||
<div className="mt-12 sm:mt-14 px-3 sm:px-4 md:px-8 lg:px-20">
|
||||
<div className="border-b border-border flex flex-row justify-between items-center gap-3 sm:gap-4">
|
||||
<div className="flex items-center gap-2 sm:gap-3 pb-3 sm:pb-4 lg:pb-6 border-b-2 border-primary relative top-[1px]">
|
||||
<div className="text-sm sm:text-base lg:text-lg font-medium">
|
||||
سبد خرید
|
||||
</div>
|
||||
<div className="size-8 rounded-lg bg-[#F2F2F2] flex items-center justify-center text-primary">
|
||||
<div className="size-6 sm:size-7 lg:size-8 rounded-md sm:rounded-lg bg-[#F2F2F2] flex items-center justify-center text-primary text-xs sm:text-sm font-medium">
|
||||
10
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="bg-white shadow h-8 sm:h-10 w-full sm:w-auto"
|
||||
className="bg-white shadow h-8 sm:h-9 lg:h-10 w-auto px-2 sm:px-3 lg:px-4 flex-shrink-0"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trash size={16} color="#AD3434" className="sm:w-5 sm:h-5" />
|
||||
<div className="text-xs sm:text-sm text-[#AD3434] font-light">حذف همه از سبد خرید</div>
|
||||
<div className="flex items-center gap-1 sm:gap-1.5 lg:gap-2">
|
||||
<Trash size={12} color="#AD3434" className="sm:w-4 sm:h-4 lg:w-5 lg:h-5" />
|
||||
<div className="text-xs sm:text-sm text-[#AD3434] font-light hidden sm:block">حذف همه از سبد خرید</div>
|
||||
<div className="text-xs text-[#AD3434] font-light sm:hidden">حذف همه</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 sm:mt-6 flex flex-col lg:flex-row gap-4 sm:gap-6">
|
||||
<div className="flex-1 border border-border p-3 sm:p-5 rounded-xl sm:rounded-2xl">
|
||||
<div className="mt-4 sm:mt-5 lg:mt-6 flex flex-col lg:flex-row gap-3 sm:gap-4 lg:gap-6">
|
||||
<div className="flex-1 border border-border rounded-lg sm:rounded-xl lg:rounded-2xl overflow-hidden">
|
||||
<CartItem noBorder />
|
||||
<CartItem />
|
||||
</div>
|
||||
@@ -40,7 +41,7 @@ const Cart: NextPage = () => {
|
||||
total={80580000}
|
||||
confirmHref="/cart/shipping"
|
||||
confirmLabel="ادامه به آدرس و ارسال"
|
||||
className="w-full lg:w-[360px]"
|
||||
className="w-full lg:w-[360px] xl:w-[400px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,17 +7,17 @@ import DiscountCard from '../components/DiscountCard'
|
||||
|
||||
const CartPayment: NextPage = () => {
|
||||
return (
|
||||
<div className="mt-14 px-20">
|
||||
<div className="mt-14 px-4 sm:px-8 lg:px-20">
|
||||
|
||||
<div className="mt-6 flex gap-6">
|
||||
<div className="mt-6 flex flex-col lg:flex-row gap-6">
|
||||
<div className='flex-1'>
|
||||
<TitleBack title='پرداخت' />
|
||||
<DiscountCard
|
||||
/>
|
||||
<div className='mt-5 border border-border rounded-2xl p-6 font-light'>
|
||||
<div className='mt-5 border border-border rounded-2xl p-4 sm:p-6 font-light'>
|
||||
<div>انتخاب روش پرداخت</div>
|
||||
|
||||
<div className='mt-10 text-[#333333] font-light'>
|
||||
<div className='mt-6 sm:mt-10 text-[#333333] font-light'>
|
||||
<RadioGroup defaultValue="option-one">
|
||||
<div className="flex items-center gap-2">
|
||||
<RadioGroupItem value="option-one" id="option-one" />
|
||||
@@ -31,15 +31,17 @@ const CartPayment: NextPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CartSummary
|
||||
itemsCount={3}
|
||||
itemsPrice={580000}
|
||||
discount={580000}
|
||||
total={80580000}
|
||||
confirmHref="/cart/payment"
|
||||
confirmLabel="پرداخت"
|
||||
className="w-[360px]"
|
||||
/>
|
||||
<div className="w-full lg:w-[360px] lg:flex-shrink-0">
|
||||
<CartSummary
|
||||
itemsCount={3}
|
||||
itemsPrice={580000}
|
||||
discount={580000}
|
||||
total={80580000}
|
||||
confirmHref="/cart/payment"
|
||||
confirmLabel="پرداخت"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -7,14 +7,14 @@ import { Location } from 'iconsax-react'
|
||||
|
||||
const CartShipping: NextPage = () => {
|
||||
return (
|
||||
<div className="mt-14 px-20">
|
||||
<div className="mt-14 px-4 sm:px-6 lg:px-20">
|
||||
|
||||
<div className="mt-6 flex gap-6">
|
||||
<div className="mt-6 flex flex-col lg:flex-row gap-6">
|
||||
<div className='flex-1'>
|
||||
<TitleBack title='آدرس و تایید جزئیات' />
|
||||
<div className='mt-5 border border-border rounded-2xl p-6 flex justify-between items-center'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<Location size={20} color='#333333' className='min-w-5' />
|
||||
<div className='mt-5 border border-border rounded-2xl p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4'>
|
||||
<div className='flex gap-2 items-start sm:items-center'>
|
||||
<Location size={20} color='#333333' className='min-w-5 mt-1 sm:mt-0' />
|
||||
<div className='text-xs text-[#7F7F7F]'>
|
||||
<div>
|
||||
آدرس تحویل سفارش
|
||||
@@ -25,22 +25,24 @@ const CartShipping: NextPage = () => {
|
||||
<div className='mt-2'>حمید ضرغامی</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-primary text-sm'>ویرایش</div>
|
||||
<div className='text-primary text-sm self-end sm:self-auto'>ویرایش</div>
|
||||
</div>
|
||||
<div className="flex-1 mt-5 border border-border p-5 rounded-2xl">
|
||||
<div className="flex-1 mt-5 border border-border p-4 sm:p-5 rounded-2xl">
|
||||
<CartItem noBorder />
|
||||
<CartItem />
|
||||
</div>
|
||||
</div>
|
||||
<CartSummary
|
||||
itemsCount={3}
|
||||
itemsPrice={580000}
|
||||
discount={580000}
|
||||
total={80580000}
|
||||
confirmHref="/cart/payment"
|
||||
confirmLabel="پرداخت"
|
||||
className="w-[360px]"
|
||||
/>
|
||||
<div className="w-full lg:w-[360px] lg:flex-shrink-0">
|
||||
<CartSummary
|
||||
itemsCount={3}
|
||||
itemsPrice={580000}
|
||||
discount={580000}
|
||||
total={80580000}
|
||||
confirmHref="/cart/payment"
|
||||
confirmLabel="پرداخت"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user