4
0
forked from crowetic/commerce

Adding real images

This commit is contained in:
Belen Curcio 2020-10-02 11:57:11 -03:00
parent 0d2ac7093b
commit 33dd7b0b78
4 changed files with 35 additions and 13 deletions

View File

@ -1,3 +1,3 @@
.root { .root {
@apply relative w-full h-full flex flex-row p-6 box-border justify-between; @apply relative w-full h-full p-6 box-border overflow-hidden;
} }

View File

@ -5,22 +5,44 @@ import { Heart } from '@components/icon'
interface Props { interface Props {
className?: string className?: string
children?: any children?: any
productData: ProductData
} }
const ProductCard: FC<Props> = ({ className }) => { interface ProductData {
name: string
images: any
}
const ProductCard: FC<Props> = ({ className, productData }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
console.log(productData)
return ( return (
<div className={rootClassName}> <div className={rootClassName}>
<div className=""> {/* Overlay */}
<h1 className="px-8 py-2 bg-white text-black font-bold text-2xl"> <div className="flex flex-row justify-between box-border w-full z-10 relative">
T-Shirt <div className="flex flex-col">
</h1> <div>
<div className="px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6"> <h1 className="p-3 h-14 bg-white text-black font-bold text-2xl truncate leading-8">
$50 {productData.name}
</h1>
</div>
<div>
<div className="px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6">
$50
</div>
</div>
</div>
<div className="flex items-center justify-center h-12 w-12 bg-white text-black cursor-pointer">
<Heart />
</div> </div>
</div> </div>
<div className="flex items-center justify-center h-12 w-12 bg-white text-black cursor-pointer">
<Heart /> <div className="absolute top-0 left-0 w-full h-full z-0">
<img
className="object-cover object-center w-full"
src={productData.images.edges[0].node.urlSmall}
/>
</div> </div>
</div> </div>
) )

View File

@ -3,7 +3,7 @@
min-height: calc((100vh - 80px - 56px) * 2); min-height: calc((100vh - 80px - 56px) * 2);
& > * { & > * {
@apply row-span-1 lg:col-span-1 h-full bg-black; @apply row-span-1 lg:col-span-1 h-full bg-black box-border;
} }
& > div:nth-child(1), & > div:nth-child(1),

View File

@ -12,8 +12,8 @@ const ProductView: FC<Props> = ({ products, className }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
return ( return (
<div className={rootClassName}> <div className={rootClassName}>
{products.slice(0, 6).map((p) => ( {products.slice(0, 6).map(({ node }) => (
<ProductCard {...p} /> <ProductCard productData={node} />
))} ))}
</div> </div>
) )