cart
This commit is contained in:
hamid zarghami
Generated
+116
-4
@@ -9,6 +9,7 @@
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-accordion": "^1.2.11",
|
||||
"@radix-ui/react-radio-group": "^1.3.7",
|
||||
"@radix-ui/react-separator": "^1.1.7",
|
||||
"@radix-ui/react-slot": "^1.2.3",
|
||||
"@tanstack/react-query": "^5.84.1",
|
||||
@@ -17,7 +18,7 @@
|
||||
"clsx": "^2.1.1",
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"iconsax-react": "^0.0.8",
|
||||
"lucide-react": "^0.536.0",
|
||||
"lucide-react": "^0.539.0",
|
||||
"next": "15.4.5",
|
||||
"react": "19.1.0",
|
||||
"react-dom": "19.1.0",
|
||||
@@ -1183,6 +1184,69 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-radio-group": {
|
||||
"version": "1.3.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.7.tgz",
|
||||
"integrity": "sha512-9w5XhD0KPOrm92OTTE0SysH3sYzHsSTHNvZgUBo/VZ80VdYyB5RneDbc0dKpURS24IxkoFRu/hI0i4XyfFwY6g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.2",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-presence": "1.1.4",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-roving-focus": "1.1.10",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2",
|
||||
"@radix-ui/react-use-previous": "1.1.1",
|
||||
"@radix-ui/react-use-size": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-roving-focus": {
|
||||
"version": "1.1.10",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz",
|
||||
"integrity": "sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.2",
|
||||
"@radix-ui/react-collection": "1.1.7",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-separator": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
|
||||
@@ -1224,6 +1288,21 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-callback-ref": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
|
||||
"integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-controllable-state": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
|
||||
@@ -1276,6 +1355,39 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-previous": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
|
||||
"integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-size": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
|
||||
"integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@rtsao/scc": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
|
||||
@@ -4949,9 +5061,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/lucide-react": {
|
||||
"version": "0.536.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.536.0.tgz",
|
||||
"integrity": "sha512-2PgvNa9v+qz4Jt/ni8vPLt4jwoFybXHuubQT8fv4iCW5TjDxkbZjNZZHa485ad73NSEn/jdsEtU57eE1g+ma8A==",
|
||||
"version": "0.539.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.539.0.tgz",
|
||||
"integrity": "sha512-VVISr+VF2krO91FeuCrm1rSOLACQUYVy7NQkzrOty52Y8TlTPcXcMdQFj9bYzBgXbWCiywlwSZ3Z8u6a+6bMlg==",
|
||||
"license": "ISC",
|
||||
"peerDependencies": {
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
|
||||
+2
-1
@@ -10,6 +10,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-accordion": "^1.2.11",
|
||||
"@radix-ui/react-radio-group": "^1.3.7",
|
||||
"@radix-ui/react-separator": "^1.1.7",
|
||||
"@radix-ui/react-slot": "^1.2.3",
|
||||
"@tanstack/react-query": "^5.84.1",
|
||||
@@ -18,7 +19,7 @@
|
||||
"clsx": "^2.1.1",
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"iconsax-react": "^0.0.8",
|
||||
"lucide-react": "^0.536.0",
|
||||
"lucide-react": "^0.539.0",
|
||||
"next": "15.4.5",
|
||||
"react": "19.1.0",
|
||||
"react-dom": "19.1.0",
|
||||
|
||||
@@ -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)
|
||||
@@ -184,3 +184,6 @@ textarea.place-black::placeholder {
|
||||
.swiper-pagination {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
div {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
"use client";
|
||||
|
||||
import { Add, Minus, Trash } from "iconsax-react";
|
||||
import React from "react";
|
||||
|
||||
type CartControlsProps = {
|
||||
quantity: number;
|
||||
onChange: (next: number) => void;
|
||||
onRemove: () => void;
|
||||
min?: number;
|
||||
max?: number;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function CartControls(props: CartControlsProps) {
|
||||
const { quantity, onChange, onRemove, min = 1, max, className } = props;
|
||||
|
||||
const canDecrement = quantity > min;
|
||||
const canIncrement = typeof max === "number" ? quantity < max : true;
|
||||
|
||||
const orange = "blue";
|
||||
|
||||
return (
|
||||
<div className={"flex items-center gap-4 " + (className ?? "")}>
|
||||
|
||||
|
||||
<div className="h-12 rounded-xl border border-border bg-white px-4 min-w-[138px] flex items-center justify-between">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => canIncrement && onChange(quantity + 1)}
|
||||
className="disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
disabled={!canIncrement}
|
||||
aria-label="increase quantity"
|
||||
>
|
||||
<Add size={22} color={orange} />
|
||||
</button>
|
||||
<span className="text-[18px] font-medium" style={{ color: orange }}>
|
||||
{quantity}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => canDecrement && onChange(quantity - 1)}
|
||||
className="disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
disabled={!canDecrement}
|
||||
aria-label="decrease quantity"
|
||||
>
|
||||
<Minus size={22} color={orange} />
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRemove}
|
||||
className="h-12 w-12 rounded-xl border border-border grid place-items-center bg-white"
|
||||
aria-label="remove from cart"
|
||||
>
|
||||
<Trash size={22} color="#AD3434" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
"use client";
|
||||
|
||||
import { NumberFormat } from "@/config/func";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Link from "next/link";
|
||||
import { FC } from "react";
|
||||
|
||||
type CartSummaryProps = {
|
||||
itemsCount: number;
|
||||
itemsPrice: number;
|
||||
discount: number;
|
||||
total: number;
|
||||
onConfirm?: () => void;
|
||||
confirmHref?: string;
|
||||
confirmLabel?: string;
|
||||
onDownloadInvoice?: () => void;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const Row: FC<{ label: string; value: string | number; emphasize?: boolean }> = (
|
||||
{ label, value, emphasize }
|
||||
) => {
|
||||
return (
|
||||
<div className="flex items-center justify-between text-[#333333]">
|
||||
<div className="text-sm font-light">{label}</div>
|
||||
<div className={emphasize ? "font-semibold" : "font-light"}>
|
||||
{typeof value === "number" ? NumberFormat(value) : value}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const CartSummary: FC<CartSummaryProps> = (props) => {
|
||||
const { itemsCount, itemsPrice, discount, total, onConfirm, onDownloadInvoice, className, confirmHref, confirmLabel } = props;
|
||||
|
||||
return (
|
||||
<div className={"rounded-2xl border border-border p-6 h-fit bg-[#FAFAFA] " + (className ?? "")}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-sm text-muted-foreground">تعداد کالاها</div>
|
||||
<div>{NumberFormat(itemsCount)} محصول</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 space-y-5">
|
||||
<Row label="قیمت کالاها" value={itemsPrice} />
|
||||
<Row label="تخفیف" value={discount} />
|
||||
<Row label="جمع فاکتور" value={total} emphasize />
|
||||
</div>
|
||||
|
||||
<div className="mt-8 space-y-3">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => onDownloadInvoice?.()}
|
||||
className="w-full h-12 rounded-xl bg-[#303030] text-white shadow hover:bg-[#303030]/90"
|
||||
>
|
||||
دانلود پیشفاکتور
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => !confirmHref && onConfirm?.()}
|
||||
className="w-full h-12 rounded-xl text-white"
|
||||
>
|
||||
{confirmHref ? (
|
||||
<Link href={confirmHref} className="w-full h-full flex items-center justify-center">
|
||||
{confirmLabel ?? "تایید و تکمیل سفارش"}
|
||||
</Link>
|
||||
) : (
|
||||
confirmLabel ?? "تایید و تکمیل سفارش"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CartSummary;
|
||||
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
|
||||
import { CircleIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function RadioGroup({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
|
||||
return (
|
||||
<RadioGroupPrimitive.Root
|
||||
data-slot="radio-group"
|
||||
className={cn("grid gap-3", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function RadioGroupItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
|
||||
return (
|
||||
<RadioGroupPrimitive.Item
|
||||
data-slot="radio-group-item"
|
||||
className={cn(
|
||||
"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<RadioGroupPrimitive.Indicator
|
||||
data-slot="radio-group-indicator"
|
||||
className="relative flex items-center justify-center"
|
||||
>
|
||||
<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
|
||||
</RadioGroupPrimitive.Indicator>
|
||||
</RadioGroupPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
export { RadioGroup, RadioGroupItem }
|
||||
Reference in New Issue
Block a user