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

Rem unused props & variants

Browse Source
This commit is contained in:
Jonatan Schultz 2021-08-26 17:12:37 +02:00
parent a1e5eb9a88
commit be53fcef16
1 changed files with 24 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
components/product/ProductCard/ProductCard.tsx
View File

@ -3,27 +3,20 @@ import cn from 'classnames'
import Link from 'next/link' import Link from 'next/link'
import type { Product } from '@commerce/types/product' import type { Product } from '@commerce/types/product'
import s from './ProductCard.module.css' import s from './ProductCard.module.css'
import Image, { ImageProps } from 'next/image' import Image from 'next/image'
import WishlistButton from '@components/wishlist/WishlistButton'
import usePrice from '@framework/product/use-price' import usePrice from '@framework/product/use-price'
import ProductTag from '../ProductTag'
interface Props { interface Props {
className?: string className?: string
product: Product product: Product
noNameTag?: boolean noNameTag?: boolean
imgProps?: Omit<ImageProps, 'src' | 'layout' | 'placeholder' | 'blurDataURL'>
variant?: 'default' | 'slim' | 'simple'
} }
const placeholderImg = '/product-img-placeholder.svg' const placeholderImg = '/product-img-placeholder.svg'
const ProductCard: FC<Props> = ({ const ProductCard: FC<Props> = ({
product, product,
imgProps,
className, className,
noNameTag = false,
variant = 'default',
}) => { }) => {
const { price } = usePrice({ const { price } = usePrice({
amount: product.price.value, amount: product.price.value,
@ -33,101 +26,40 @@ const ProductCard: FC<Props> = ({
const rootClassName = cn( const rootClassName = cn(
s.root, s.root,
{ [s.slim]: variant === 'slim', [s.simple]: variant === 'simple' },
className className
) )
return ( return (
<Link href={`/products/${product.slug}`}> <Link href={`/products/${product.slug}`}>
<a className={rootClassName}> <a className={rootClassName}>
{variant === 'slim' && ( <div className={s.imageContainer}>
<> <div className={s.imageContainerInner}>
<div className={s.header}>
<span>{product.name}</span>
</div>
{product?.images && ( {product?.images && (
<Image <Image
quality="85"
src={product.images[0]?.url || placeholderImg}
alt={product.name || 'Product Image'} alt={product.name || 'Product Image'}
height={320} className={s.productImage}
width={320} src={product.images[0]?.url || placeholderImg}
layout="fixed" quality="85"
{...imgProps} layout="fill"
objectFit="contain"
/> />
)} )}
</> </div>
)} <div className={s.typeIcon}>
<Image
{variant === 'simple' && ( src="/icon-audiobook.svg"
<> width={22}
{process.env.COMMERCE_WISHLIST_ENABLED && ( height={23}
<WishlistButton />
className={s.wishlistButton} </div>
productId={product.id} </div>
variant={product.variants[0]} <div className="font-bold line-clamp-3">
/> {product.name}
)} </div>
{!noNameTag && ( <div className="italic">
<div className={s.header}> Author (missing data)
<h3 className={s.name}> </div>
<span>{product.name}</span> <div>{price}</div>
</h3>
<div className={s.price}>
{`${price} ${product.price?.currencyCode}`}
</div>
</div>
)}
<div className={s.imageContainer}>
{product?.images && (
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
)}
</div>
</>
)}
{variant === 'default' && (
<>
<div className={s.imageContainer}>
<div className={s.imageContainerInner}>
{product?.images && (
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
quality="85"
layout="fill"
objectFit="contain"
{...imgProps}
/>
)}
</div>
<div className={s.typeIcon}>
<Image
src="/icon-audiobook.svg"
width={22}
height={23}
/>
</div>
</div>
<div className="font-bold line-clamp-3">
{product.name}
</div>
<div className="italic">
Author (missing data)
</div>
<div>{price}</div>
</>
)}
</a> </a>
</Link> </Link>
) )