mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
Removed Futures
This commit is contained in:
parent
27dd4bfb69
commit
4259136983
@ -1,81 +0,0 @@
|
||||
import { FC } from 'react'
|
||||
import cn from 'classnames'
|
||||
import Link from 'next/link'
|
||||
import s from './ProductCard.module.css'
|
||||
import Image, { ImageProps } from 'next/image'
|
||||
import WishlistButton from '@components/wishlist/WishlistButton'
|
||||
|
||||
interface Props {
|
||||
className?: string
|
||||
product: Product
|
||||
variant?: 'slim' | 'simple'
|
||||
imgProps?: Omit<ImageProps, 'src'>
|
||||
}
|
||||
|
||||
const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => {
|
||||
return (
|
||||
<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>
|
||||
{product.images[0] && (
|
||||
<Image
|
||||
quality="85"
|
||||
alt={product.name}
|
||||
src={product.images[0].url}
|
||||
height={320}
|
||||
width={320}
|
||||
layout="fixed"
|
||||
{...imgProps}
|
||||
/>
|
||||
)}
|
||||
</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.prices[0].value}
|
||||
|
||||
{product.prices[0].currencyCode}
|
||||
</span>
|
||||
</div>
|
||||
<WishlistButton
|
||||
className={s.wishlistButton}
|
||||
productId={product.id}
|
||||
variant={product.variants[0]!}
|
||||
/>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProductCard
|
@ -1,45 +1,20 @@
|
||||
import { FC } from 'react'
|
||||
import cn from 'classnames'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import type { FC } from 'react'
|
||||
import s from './ProductCard.module.css'
|
||||
import Image, { ImageProps } from 'next/image'
|
||||
import WishlistButton from '@components/wishlist/WishlistButton'
|
||||
|
||||
import usePrice from '@framework/product/use-price'
|
||||
import type { ProductNode } from '@framework/api/operations/get-all-products'
|
||||
|
||||
interface Props {
|
||||
className?: string
|
||||
product: ProductNode
|
||||
product: Product
|
||||
variant?: 'slim' | 'simple'
|
||||
imgWidth: number | string
|
||||
imgHeight: number | string
|
||||
imgLayout?: 'fixed' | 'intrinsic' | 'responsive' | undefined
|
||||
imgPriority?: boolean
|
||||
imgLoading?: 'eager' | 'lazy'
|
||||
imgSizes?: string
|
||||
imgProps?: Omit<ImageProps, 'src'>
|
||||
}
|
||||
|
||||
const ProductCard: FC<Props> = ({
|
||||
className,
|
||||
product: p,
|
||||
variant,
|
||||
imgWidth,
|
||||
imgHeight,
|
||||
imgPriority,
|
||||
imgLoading,
|
||||
imgSizes,
|
||||
imgLayout = 'responsive',
|
||||
}) => {
|
||||
const src = p.images.edges?.[0]?.node?.urlOriginal!
|
||||
const { price } = usePrice({
|
||||
amount: p.prices?.price?.value,
|
||||
baseAmount: p.prices?.retailPrice?.value,
|
||||
currencyCode: p.prices?.price?.currencyCode!,
|
||||
})
|
||||
|
||||
const ProductCard: FC<Props> = ({ className, product, variant, imgProps }) => {
|
||||
return (
|
||||
<Link href={`/product${p.path}`}>
|
||||
<Link href={`product/${product.slug}`}>
|
||||
<a
|
||||
className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
|
||||
>
|
||||
@ -47,20 +22,20 @@ const ProductCard: FC<Props> = ({
|
||||
<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">
|
||||
{p.name}
|
||||
{product.name}
|
||||
</span>
|
||||
</div>
|
||||
<Image
|
||||
quality="85"
|
||||
width={imgWidth}
|
||||
sizes={imgSizes}
|
||||
height={imgHeight}
|
||||
layout={imgLayout}
|
||||
loading={imgLoading}
|
||||
priority={imgPriority}
|
||||
src={p.images.edges?.[0]?.node.urlOriginal!}
|
||||
alt={p.images.edges?.[0]?.node.altText || 'Product Image'}
|
||||
/>
|
||||
{product.images[0] && (
|
||||
<Image
|
||||
quality="85"
|
||||
alt={product.name}
|
||||
src={product.images[0].url}
|
||||
height={320}
|
||||
width={320}
|
||||
layout="fixed"
|
||||
{...imgProps}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
@ -68,29 +43,33 @@ const ProductCard: FC<Props> = ({
|
||||
<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>{p.name}</span>
|
||||
<span>{product.name}</span>
|
||||
</h3>
|
||||
<span className={s.productPrice}>{price}</span>
|
||||
<span className={s.productPrice}>
|
||||
{product.prices[0].value}
|
||||
|
||||
{product.prices[0].currencyCode}
|
||||
</span>
|
||||
</div>
|
||||
<WishlistButton
|
||||
className={s.wishlistButton}
|
||||
productId={p.entityId}
|
||||
variant={p.variants.edges?.[0]!}
|
||||
productId={product.id}
|
||||
variant={product.variants[0]!}
|
||||
/>
|
||||
</div>
|
||||
<div className={s.imageContainer}>
|
||||
<Image
|
||||
quality="85"
|
||||
src={src}
|
||||
alt={p.name}
|
||||
className={s.productImage}
|
||||
width={imgWidth}
|
||||
sizes={imgSizes}
|
||||
height={imgHeight}
|
||||
layout={imgLayout}
|
||||
loading={imgLoading}
|
||||
priority={imgPriority}
|
||||
/>
|
||||
{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>
|
||||
</>
|
||||
)}
|
||||
|
@ -1,7 +1,6 @@
|
||||
import rangeMap from '@lib/range-map'
|
||||
import { Layout } from '@components/common'
|
||||
import ProductCard from '@components/product/ProductCard/FUTURE_ProductCard'
|
||||
import { Grid, Marquee, Hero } from '@components/ui'
|
||||
import { ProductCard } from '@components/product'
|
||||
import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
|
||||
import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user