crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-15 06:52:32 +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
Show Stats 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>
)

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

@ -3,7 +3,7 @@
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),

4
components/product/ProductGrid/ProductGrid.tsx
View File

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