4
0
forked from crowetic/commerce

Latest changes

This commit is contained in:
Belen Curcio 2020-10-05 17:35:14 -03:00
parent 59a7dc20cd
commit b581b1902e
4 changed files with 47 additions and 45 deletions

View File

@ -8,6 +8,7 @@ interface Props {
className?: string className?: string
children?: any children?: any
node: ProductData node: ProductData
variant?: 'slim'
} }
interface ProductData { interface ProductData {
@ -17,28 +18,42 @@ interface ProductData {
path: string path: string
} }
const ProductCard: FC<Props> = ({ className, node: productData }) => { const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
if (variant === 'slim') {
return (
<div className="relative overflow-hidden box-border">
<img
className="object-scale-down h-24"
src={p.images.edges[0].node.urlSmall}
/>
<div className="absolute inset-0 flex items-center justify-end mr-8">
<span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
{p.name}
</span>
</div>
</div>
)
}
return ( return (
<Link href={`product${productData.path}`}> <Link href={`product${p.path}`}>
<div className={rootClassName}> <div className={rootClassName}>
<div className="absolute z-10 inset-0 flex items-center justify-center"> <div className="absolute z-10 inset-0 flex items-center justify-center">
<img <img
className="w-full object-cover" className="w-full object-cover"
src={productData.images.edges[0].node.urlSmall} src={p.images.edges[0].node.urlSmall}
/> />
</div> </div>
<div className={s.squareBg} /> <div className={s.squareBg} />
<div className="flex flex-row justify-between box-border w-full z-10 relative"> <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 flex-col flex-1 overflow-hidden">
<div className="flex-1"> <div className="flex-1">
<h1 className={s.productTitle}>{productData.name}</h1> <h1 className={s.productTitle}>{p.name}</h1>
</div> </div>
<div className="flex-0"> <div className="flex-0">
<div className={s.productPrice}> <div className={s.productPrice}>${p.prices.price.value}</div>
${productData.prices.price.value}
</div>
</div> </div>
</div> </div>
<div className={s.wishlistButton}> <div className={s.wishlistButton}>

View File

@ -1,14 +1,26 @@
.root { .root {
@apply w-full relative; @apply w-full;
min-width: 100%; min-width: 100%;
} }
.container { .container {
@apply flex flex-row; @apply flex flex-row items-center;
& > * { & > * {
@apply flex-1; @apply flex-1 px-16 py-4;
min-width: 500px; width: 460px;
}
& > *:after {
content: ' ';
display: block;
position: absolute;
height: 100px;
background: #999;
width: 2px;
left: 20px;
top: calc(50% - 53px);
transform: rotate(25deg);
} }
} }

View File

@ -18,7 +18,6 @@ const M: FC<Props> = ({
items, items,
wrapper: Component = DefaultWrapper, wrapper: Component = DefaultWrapper,
variant = 'primary', variant = 'primary',
// min = 'none',
}) => { }) => {
const rootClassName = cn( const rootClassName = cn(
s.root, s.root,
@ -40,17 +39,17 @@ const M: FC<Props> = ({
// ) // )
return ( return (
<Ticker> <div className={rootClassName}>
{({ index }) => ( <Ticker>
<div className={rootClassName}> {({ index }) => (
<div className={s.container}> <div className={s.container}>
{items.map((p: any) => ( {items.map((p: any) => (
<Component {...p} key={index} /> <Component {...p} key={index} />
))} ))}
</div> </div>
</div> )}
)} </Ticker>
</Ticker> </div>
) )
} }

View File

@ -19,20 +19,8 @@ export default function Home({
<> <>
<Grid items={products.slice(0, 3)} wrapper={ProductCard} /> <Grid items={products.slice(0, 3)} wrapper={ProductCard} />
<Marquee <Marquee
items={[...products.slice(3, 6)]} items={products.slice(0, 3)}
wrapper={(p: any) => ( wrapper={(p: any) => <ProductCard {...p} variant="slim" />}
<div className="relative overflow-hidden p-6 box-border">
<img
className="object-scale-down h-24"
src={p.node.images.edges[0].node.urlSmall}
/>
<div className="absolute inset-0 flex items-center justify-end mr-8">
<span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
{p.node.name}
</span>
</div>
</div>
)}
/> />
<Hero <Hero
headline="Release Details: The Yeezy BOOST 350 V2 Natural'" headline="Release Details: The Yeezy BOOST 350 V2 Natural'"
@ -48,19 +36,7 @@ export default function Home({
<Marquee <Marquee
items={[...products.slice(3, 6)]} items={[...products.slice(3, 6)]}
variant="secondary" variant="secondary"
wrapper={(p: any) => ( wrapper={(p: any) => <ProductCard {...p} variant="slim" />}
<div className="relative overflow-hidden p-6 box-border">
<img
className="object-scale-down h-24"
src={p.node.images.edges[0].node.urlSmall}
/>
<div className="absolute inset-0 flex items-center justify-end mr-8">
<span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
{p.node.name}
</span>
</div>
</div>
)}
/> />
<div className="py-12 flex flex-row w-full"> <div className="py-12 flex flex-row w-full">
<div className="flex-0 pr-3 w-48 break-words"> <div className="flex-0 pr-3 w-48 break-words">