Latest changes

components/product/ProductCard/ProductCard.tsx

@@ -8,6 +8,7 @@ interface Props {
   className?: string
   children?: any
   node: ProductData
+  variant?: 'slim'
 }
 
 interface ProductData {
@@ -17,28 +18,42 @@ interface ProductData {
   path: string
 }
 
-const ProductCard: FC<Props> = ({ className, node: productData }) => {
+const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
   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 (
-    <Link href={`product${productData.path}`}>
+    <Link href={`product${p.path}`}>
       <div className={rootClassName}>
         <div className="absolute z-10 inset-0 flex items-center justify-center">
           <img
             className="w-full object-cover"
-            src={productData.images.edges[0].node.urlSmall}
+            src={p.images.edges[0].node.urlSmall}
           />
         </div>
         <div className={s.squareBg} />
         <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-1">
-              <h1 className={s.productTitle}>{productData.name}</h1>
+              <h1 className={s.productTitle}>{p.name}</h1>
             </div>
             <div className="flex-0">
-              <div className={s.productPrice}>
-                ${productData.prices.price.value}
-              </div>
+              <div className={s.productPrice}>${p.prices.price.value}</div>
             </div>
           </div>
           <div className={s.wishlistButton}>

components/ui/Marquee/Marquee.module.css

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

components/ui/Marquee/Marquee.tsx

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

pages/index.tsx

@@ -19,20 +19,8 @@ export default function Home({
     <>
       <Grid items={products.slice(0, 3)} wrapper={ProductCard} />
       <Marquee
-        items={[...products.slice(3, 6)]}
-        wrapper={(p: any) => (
-          <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>
-        )}
+        items={products.slice(0, 3)}
+        wrapper={(p: any) => <ProductCard {...p} variant="slim" />}
       />
       <Hero
         headline="Release Details: The Yeezy BOOST 350 V2 ‘Natural'"
@@ -48,19 +36,7 @@ export default function Home({
       <Marquee
         items={[...products.slice(3, 6)]}
         variant="secondary"
-        wrapper={(p: any) => (
-          <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>
-        )}
+        wrapper={(p: any) => <ProductCard {...p} variant="slim" />}
       />
       <div className="py-12 flex flex-row w-full">
         <div className="flex-0 pr-3 w-48 break-words">