89 lines
2.9 KiB
JavaScript
89 lines
2.9 KiB
JavaScript
import {
|
|
Icons,
|
|
SpecialSell,
|
|
DiscountProduct,
|
|
ProductPrice,
|
|
Depot,
|
|
ResponsiveImage,
|
|
} from 'components'
|
|
import { truncate } from 'utils'
|
|
|
|
const ProductCard = props => {
|
|
//? Props
|
|
const { product, slide } = props
|
|
|
|
//? Render(s)
|
|
return (
|
|
<a target="_blank" href={`/products/${product._id}`}>
|
|
<article
|
|
className={`pt-2 pb-3 border-b border-gray-100 sm:h-[540px] xl:h-[470px] sm:px-3 ${
|
|
!slide && 'sm:border sm:hover:shadow-3xl'
|
|
}`}
|
|
>
|
|
<SpecialSell discount={product.discount} inStock={product.inStock} />
|
|
<div className="flex items-center gap-4 sm:flex-col sm:space-x-4">
|
|
<div className="sm:flex sm:p-1 ">
|
|
<ResponsiveImage
|
|
dimensions="h-[28vw] w-[26vw] sm:w-56 sm:h-60 sm:mb-8 xl:w-44 xl:h-48"
|
|
src={product.images[0].url}
|
|
alt={product.title}
|
|
/>
|
|
|
|
<div className="p-2 flex gap-1.5 items-center sm:flex-col sm:items-end">
|
|
{product.colors &&
|
|
product.inStock !== 0 &&
|
|
product.colors
|
|
.slice(0, 3)
|
|
.map(color => (
|
|
<span
|
|
key={color.id}
|
|
className="inline-block w-2.5 h-2.5 rounded-xl border-gray-300 shadow border "
|
|
style={{ background: color.hashCode }}
|
|
></span>
|
|
))}
|
|
{product.colors.length > 3 && product.inStock !== 0 && (
|
|
<Icons.Plus className="w-3 h-3 mr-1 sm:mr-0" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 space-y-5 sm:w-full">
|
|
<h2 className="hidden text-xs leading-6 text-gray-800 break-all h-14 xl:block">
|
|
{truncate(product.title, 70)}
|
|
</h2>
|
|
<h2 className="text-xs leading-6 text-gray-800 h-14 xl:hidden">
|
|
{truncate(product.title, 90)}
|
|
</h2>
|
|
<div className="flex justify-between">
|
|
<div>
|
|
<Depot inStock={product.inStock} />
|
|
</div>
|
|
<div className="flex items-center gap-x-1">
|
|
<span className="">{product.rating.toFixed(1)}</span>
|
|
<Icons.Star className="icon text-amber-400" />
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<div>
|
|
{product.discount > 0 && product.inStock !== 0 && (
|
|
<DiscountProduct discount={product.discount} />
|
|
)}
|
|
</div>
|
|
{product.inStock !== 0 ? (
|
|
<ProductPrice
|
|
inStock={product.inStock}
|
|
discount={product.discount}
|
|
price={product.price}
|
|
/>
|
|
) : (
|
|
<span className="h-12 my-0.5">不可用</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</a>
|
|
)
|
|
}
|
|
|
|
export default ProductCard
|