forked from crowetic/commerce
Adding real images
This commit is contained in:
parent
0d2ac7093b
commit
33dd7b0b78
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
|
@ -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),
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
|
Loading…
x
Reference in New Issue
Block a user