cart
This commit is contained in:
hamid zarghami
@@ -0,0 +1,83 @@
|
||||
"use client";
|
||||
|
||||
import CartControls from '@/components/CartControls'
|
||||
import { clx } from '@/helpers/utils';
|
||||
import { ArchiveTick, Shop, TruckFast } from 'iconsax-react'
|
||||
import Image from 'next/image'
|
||||
import { FC } from 'react'
|
||||
|
||||
type Props = {
|
||||
noBorder?: boolean
|
||||
}
|
||||
|
||||
const CartItem: FC<Props> = (props) => {
|
||||
|
||||
const { noBorder } = props
|
||||
|
||||
return (
|
||||
<div className={clx(
|
||||
'p-10 flex 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-1'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div className='max-w-[250px] truncate'>
|
||||
گوشی موبایل سامسونگ مدل Galaxy S24 Ultra دو سیم کارت ظرفیت 1 ترابایت و رم 12 گیگابایت - ویتنام
|
||||
</div>
|
||||
<div>
|
||||
70,400,000 <span className='text-xs'>تومان</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>
|
||||
<div className='text-sm'>مشکی</div>
|
||||
</div>
|
||||
|
||||
<div className='flex items-center gap-2.5 mt-4'>
|
||||
<div className='w-6'>
|
||||
<Shop size={20} color='#333333' />
|
||||
</div>
|
||||
<div className='text-sm'>فروشنده فروشگاه سندس</div>
|
||||
</div>
|
||||
|
||||
<div className='flex items-center gap-2.5 mt-4'>
|
||||
<div className='w-6'>
|
||||
<ArchiveTick size={20} color='#333333' />
|
||||
</div>
|
||||
<div className='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>
|
||||
<div className='text-sm'>ارسال از سندس حداکثر پس از 3 روز کاری</div>
|
||||
</div>
|
||||
|
||||
<CartControls
|
||||
onChange={() => null}
|
||||
onRemove={() => null}
|
||||
quantity={1}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CartItem
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { FC } from 'react'
|
||||
|
||||
const DiscountCard: FC = () => {
|
||||
return (
|
||||
<div className='h-16 border border-border rounded-2xl flex justify-between mt-5 items-center px-6'>
|
||||
<div>
|
||||
کد تخفیف دارید؟
|
||||
</div>
|
||||
|
||||
<Button variant={'ghost'} className='text-left p-0 text-primary hover:bg-transparent cursor-pointer'>
|
||||
ثبت کد
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DiscountCard
|
||||
@@ -0,0 +1,19 @@
|
||||
import { ArrowRight } from 'iconsax-react'
|
||||
import { FC } from 'react'
|
||||
|
||||
type Props = {
|
||||
title: string
|
||||
}
|
||||
|
||||
const TitleBack: FC<Props> = (props) => {
|
||||
const { title } = props
|
||||
|
||||
return (
|
||||
<div className='h-16 border border-border rounded-2xl flex gap-1.5 items-center px-6'>
|
||||
<ArrowRight size={20} color='#333333' />
|
||||
<div className='font-light '>{title}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TitleBack
|
||||
@@ -0,0 +1,50 @@
|
||||
import { Button } from "@/components/ui/button"
|
||||
import CartItem from "@/app/cart/components/CartItem"
|
||||
import CartSummary from "@/components/CartSummary"
|
||||
import withLayout from "@/hoc/withLayout"
|
||||
import { Trash } from "iconsax-react"
|
||||
import { NextPage } from "next"
|
||||
|
||||
const Cart: NextPage = () => {
|
||||
return (
|
||||
<div className="mt-14 px-20">
|
||||
<div className="border-b border-border flex justify-between items-center">
|
||||
<div className="flex items-center gap-3 pb-6 border-b-2 border-primary relative top-[1px]">
|
||||
<div>
|
||||
سبد خرید
|
||||
</div>
|
||||
<div className="size-8 rounded-lg bg-[#F2F2F2] flex items-center justify-center text-primary">
|
||||
10
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="bg-white shadow h-10"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trash size={20} color="#AD3434" />
|
||||
<div className="text-sm text-[#AD3434] font-light">حذف همه از سبد خرید</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex gap-6">
|
||||
<div className="flex-1 border border-border p-5 rounded-2xl">
|
||||
<CartItem noBorder />
|
||||
<CartItem />
|
||||
</div>
|
||||
<CartSummary
|
||||
itemsCount={3}
|
||||
itemsPrice={580000}
|
||||
discount={580000}
|
||||
total={80580000}
|
||||
confirmHref="/cart/shipping"
|
||||
confirmLabel="ادامه به آدرس و ارسال"
|
||||
className="w-[360px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default withLayout(Cart)
|
||||
@@ -0,0 +1,48 @@
|
||||
import CartSummary from '@/components/CartSummary'
|
||||
import withLayout from '@/hoc/withLayout'
|
||||
import { NextPage } from 'next'
|
||||
import TitleBack from '../components/TitleBack'
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
||||
import DiscountCard from '../components/DiscountCard'
|
||||
|
||||
const CartPayment: NextPage = () => {
|
||||
return (
|
||||
<div className="mt-14 px-20">
|
||||
|
||||
<div className="mt-6 flex gap-6">
|
||||
<div className='flex-1'>
|
||||
<TitleBack title='پرداخت' />
|
||||
<DiscountCard
|
||||
/>
|
||||
<div className='mt-5 border border-border rounded-2xl p-6 font-light'>
|
||||
<div>انتخاب روش پرداخت</div>
|
||||
|
||||
<div className='mt-10 text-[#333333] font-light'>
|
||||
<RadioGroup defaultValue="option-one">
|
||||
<div className="flex items-center gap-2">
|
||||
<RadioGroupItem value="option-one" id="option-one" />
|
||||
<div className='text-sm'>زین پال</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<RadioGroupItem value="option-one" id="option-one" />
|
||||
<div className='text-sm'>زین پال</div>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CartSummary
|
||||
itemsCount={3}
|
||||
itemsPrice={580000}
|
||||
discount={580000}
|
||||
total={80580000}
|
||||
confirmHref="/cart/payment"
|
||||
confirmLabel="پرداخت"
|
||||
className="w-[360px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default withLayout(CartPayment)
|
||||
@@ -0,0 +1,49 @@
|
||||
import CartSummary from '@/components/CartSummary'
|
||||
import withLayout from '@/hoc/withLayout'
|
||||
import { NextPage } from 'next'
|
||||
import CartItem from '../components/CartItem'
|
||||
import TitleBack from '../components/TitleBack'
|
||||
import { Location } from 'iconsax-react'
|
||||
|
||||
const CartShipping: NextPage = () => {
|
||||
return (
|
||||
<div className="mt-14 px-20">
|
||||
|
||||
<div className="mt-6 flex 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='text-xs text-[#7F7F7F]'>
|
||||
<div>
|
||||
آدرس تحویل سفارش
|
||||
</div>
|
||||
<div className='mt-2 text-sm text-black'>
|
||||
اراک خیابان امام حسن غریبی خیابان 123
|
||||
</div>
|
||||
<div className='mt-2'>حمید ضرغامی</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-primary text-sm'>ویرایش</div>
|
||||
</div>
|
||||
<div className="flex-1 mt-5 border border-border 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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default withLayout(CartShipping)
|
||||
Reference in New Issue
Block a user