crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Restored Index Agnostic

Browse Source
This commit is contained in:
Belen Curcio
2021-01-07 11:58:00 -03:00
parent 812535caff
commit e9dfda1e86
4 changed files with 101 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
components/product/ProductCard/FUTURE_ProductCard.tsx
View File

@@ -1,5 +1,6 @@
import { FC } from 'react'
import cn from 'classnames'
import Link from 'next/link'
import Image, { ImageProps } from 'next/image'
import s from './ProductCard.module.css'
// Restore Wishlist func
@@ -13,44 +14,63 @@ interface Props {
}
const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => {
const firstImage = product.images[0]
return (
<a className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}>
{variant === 'slim' ? (
<div className="relative overflow-hidden box-border">
<div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
<span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
{product.name}
</span>
{/* Image */}
</div>
</div>
) : (
<>
<div className={s.squareBg} />
<div className="flex flex-row justify-between box-border w-full z-20 absolute">
<div className="absolute top-0 left-0 pr-16 max-w-full">
<h3 className={s.productTitle}>
<span>{product.name}</span>
</h3>
<span className={s.productPrice}>{product.price}</span>
<Link href={`product/${product.slug}`}>
<a
className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
>
{variant === 'slim' ? (
<div className="relative overflow-hidden box-border">
<div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
<span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
{product.name}
</span>
</div>
</div>
<div className={s.imageContainer}>
{firstImage.src && (
{product.images[0] && (
<Image
quality="85"
alt={product.name}
className={s.productImage}
src={firstImage.src}
height={540}
width={540}
src={product.images[0].url}
height={320}
width={320}
layout="fixed"
{...imgProps}
/>
)}
</div>
</>
)}
</a>
) : (
<>
<div className={s.squareBg} />
<div className="flex flex-row justify-between box-border w-full z-20 absolute">
<div className="absolute top-0 left-0 pr-16 max-w-full">
<h3 className={s.productTitle}>
<span>{product.name}</span>
</h3>
<span className={s.productPrice}>
{product.prices[0].value}
&nbsp;
{product.prices[0].currencyCode}
</span>
</div>
</div>
<div className={s.imageContainer}>
{product.images[0] && (
<Image
alt={product.name}
className={s.productImage}
src={product.images[0].url}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
)}
</div>
</>
)}
</a>
</Link>
)
}