71 lines
2.2 KiB
JavaScript
71 lines
2.2 KiB
JavaScript
import Link from 'next/link'
|
|
|
|
import { formatNumber } from 'utils'
|
|
|
|
import { SpecialSell, CartButtons, Icons, DiscountCartItem, ResponsiveImage } from 'components'
|
|
|
|
const CartItem = props => {
|
|
//? Props
|
|
const { item } = props
|
|
|
|
//? Render(s)
|
|
return (
|
|
<article className="flex px-4 py-5 space-x-4 ">
|
|
{/* image & cartButtons */}
|
|
<div className="space-y-4">
|
|
<ResponsiveImage dimensions="w-28 h-28" src={item.img.url} alt={item.name} />
|
|
|
|
<div className="mx-auto w-fit ">
|
|
<SpecialSell discount={item.discount} inStock={item.inStock} />
|
|
</div>
|
|
|
|
<CartButtons item={item} />
|
|
</div>
|
|
|
|
{/* name */}
|
|
<div>
|
|
<h5 className="mb-3 text-sm">
|
|
<Link href={`/products/${item.productID}`}>{item.name}</Link>
|
|
</h5>
|
|
|
|
{/* info */}
|
|
<div className="space-y-3">
|
|
{item.color && (
|
|
<div className="flex items-center gap-x-2">
|
|
<span
|
|
className="inline-block w-5 h-5 shadow rounded-xl"
|
|
style={{ background: item.color.hashCode }}
|
|
/>
|
|
<span>{item.color.name}</span>
|
|
</div>
|
|
)}
|
|
{item.size && (
|
|
<div className="flex items-center gap-x-2">
|
|
<Icons.Rule className="icon" />
|
|
<span className="">{item.size.size}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-x-2">
|
|
<Icons.ShieldCheck className="icon" />
|
|
<span className="font-light">正品保证和发货保证</span>
|
|
</div>
|
|
<div className="flex items-center gap-x-2">
|
|
<Icons.Save className="icon text-sky-400" />
|
|
<span className="font-light">仓库有售</span>
|
|
</div>
|
|
{item.discount > 0 ? (
|
|
<DiscountCartItem discount={item.discount} price={item.price} />
|
|
) : (
|
|
<div className="flex items-center gap-x-2">
|
|
<span className="text-sm text-gray-700">{formatNumber(item.price)}</span>
|
|
<span className="">¥</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|
|
|
|
export default CartItem
|