crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-14 22:42:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Removed Futures

Browse Source
This commit is contained in:
Belen Curcio 2021-01-07 17:10:27 -03:00
parent 27dd4bfb69
commit 4259136983
3 changed files with 39 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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}
&nbsp;
{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

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

@ -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}
&nbsp;
{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>
</>
)}

3
pages/index.tsx
View File

@ -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'