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

Transitions

Browse Source
This commit is contained in:
Belen Curcio
2020-10-05 14:28:59 -03:00
parent eb5fdebcf5
commit a25da7d6cf
8 changed files with 178 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
components/product/ProductCard/ProductCard.module.css
View File

@@ -1,9 +1,67 @@
.root {
@apply relative w-full p-6 box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear;
&:hover {
@apply cursor-pointer;
& .squareBg {
@apply inset-10;
}
& .productTitle,
& .productPrice,
& .wishlistButton {
@apply bg-black text-white;
}
&:nth-child(6n + 1) .productTitle,
&:nth-child(6n + 1) .productPrice,
&:nth-child(6n + 1) .wishlistButton {
@apply bg-violet text-white;
}
&:nth-child(6n + 5) .productTitle,
&:nth-child(6n + 5) .productPrice,
&:nth-child(6n + 5) .wishlistButton {
@apply bg-blue text-white;
}
&:nth-child(6n + 3) .productTitle,
&:nth-child(6n + 3) .productPrice,
&:nth-child(6n + 3) .wishlistButton {
@apply bg-pink text-white;
}
&:nth-child(6n + 6) .productTitle,
&:nth-child(6n + 6) .productPrice,
&:nth-child(6n + 6) .wishlistButton {
@apply bg-cyan text-black;
}
}
&:nth-child(6n + 1) .squareBg {
@apply bg-violet;
}
&:nth-child(6n + 5) .squareBg {
@apply bg-blue;
}
&:nth-child(6n + 3) .squareBg {
@apply bg-pink;
}
&:nth-child(6n + 6) .squareBg {
@apply bg-cyan;
}
}
.squareBg {
@apply cursor-pointer absolute inset-0 z-0 transition-all duration-75 ease-in-out bg-black;
}
.productTitle {
@apply p-3 h-14 bg-white text-black font-bold text-lg truncate leading-8 inline-flex;
@apply p-3 h-14 bg-white text-black font-bold text-lg truncate leading-8 inline-flex transition ease-linear;
max-width: calc(100% - 50px);
@screen lg {
@@ -12,9 +70,9 @@
}
.productPrice {
@apply px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6;
@apply px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6 transition ease-linear;
}
.wishlistButton {
@apply w-14 h-14 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6 cursor-pointer;
@apply w-14 h-14 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6 cursor-pointer transition ease-linear;
}

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

@@ -2,7 +2,8 @@ import cn from 'classnames'
import s from './ProductCard.module.css'
import { FC } from 'react'
import { Heart } from '@components/icon'
import { url } from 'inspector'
import Link from 'next/link'
interface Props {
className?: string
children?: any
@@ -13,34 +14,39 @@ interface ProductData {
name: string
images: any
prices: any
path: string
}
const ProductCard: FC<Props> = ({ className, node: productData }) => {
const rootClassName = cn(s.root, className)
return (
<div
className={rootClassName}
style={{
backgroundImage: `url('${productData.images.edges[0].node.urlSmall}')`,
}}
>
<div className="flex flex-row justify-between box-border w-full z-10 relative">
<div className="flex flex-col flex-1 overflow-hidden">
<div className="flex-1">
<h1 className={s.productTitle}>{productData.name}</h1>
</div>
<div className="flex-0">
<div className={s.productPrice}>
${productData.prices.price.value}
<Link href={`product${productData.path}`}>
<div className={rootClassName}>
<div className="absolute z-10 inset-0 flex items-center justify-center">
<img
className="w-full object-cover"
src={productData.images.edges[0].node.urlSmall}
/>
</div>
<div className={s.squareBg} />
<div className="flex flex-row justify-between box-border w-full z-10 relative">
<div className="flex flex-col flex-1 overflow-hidden">
<div className="flex-1">
<h1 className={s.productTitle}>{productData.name}</h1>
</div>
<div className="flex-0">
<div className={s.productPrice}>
${productData.prices.price.value}
</div>
</div>
</div>
</div>
<div className={s.wishlistButton}>
<Heart />
<div className={s.wishlistButton}>
<Heart />
</div>
</div>
</div>
</div>
</Link>
)
}