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

Adding real images

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,3 @@
.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;
}

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

@@ -5,22 +5,44 @@ import { Heart } from '@components/icon'
interface Props {
className?: string
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)
console.log(productData)
return (
<div className={rootClassName}>
<div className="">
<h1 className="px-8 py-2 bg-white text-black font-bold text-2xl">
T-Shirt
</h1>
<div className="px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6">
$50
{/* Overlay */}
<div className="flex flex-row justify-between box-border w-full z-10 relative">
<div className="flex flex-col">
<div>
<h1 className="p-3 h-14 bg-white text-black font-bold text-2xl truncate leading-8">
{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 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>
)