From aa657c8baa875308fd7b68441749938e1cb5dc8d Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sun, 4 Oct 2020 15:16:56 -0300
Subject: [PATCH] New UI Primitices

---
 .../product/ProductGrid/ProductGrid.tsx       | 32 ---------------
 components/product/ProductGrid/index.ts       |  1 -
 components/product/index.ts                   |  1 -
 .../Grid/Grid.module.css}                     |  6 +--
 components/ui/Grid/Grid.tsx                   | 40 +++++++++++++++++++
 components/ui/Grid/index.ts                   |  1 +
 components/ui/Marquee/Marquee.module.css      | 11 +++++
 components/ui/Marquee/Marquee.tsx             | 38 ++++++++++++++++++
 components/ui/Marquee/index.ts                |  1 +
 components/ui/index.ts                        |  2 +
 pages/index.tsx                               | 39 ++++++++++++++----
 11 files changed, 127 insertions(+), 45 deletions(-)
 delete mode 100644 components/product/ProductGrid/ProductGrid.tsx
 delete mode 100644 components/product/ProductGrid/index.ts
 rename components/{product/ProductGrid/ProductGrid.module.css => ui/Grid/Grid.module.css} (93%)
 create mode 100644 components/ui/Grid/Grid.tsx
 create mode 100644 components/ui/Grid/index.ts
 create mode 100644 components/ui/Marquee/Marquee.module.css
 create mode 100644 components/ui/Marquee/Marquee.tsx
 create mode 100644 components/ui/Marquee/index.ts

diff --git a/components/product/ProductGrid/ProductGrid.tsx b/components/product/ProductGrid/ProductGrid.tsx
deleted file mode 100644
index 04f29cc53..000000000
--- a/components/product/ProductGrid/ProductGrid.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import cn from 'classnames'
-import { FC } from 'react'
-import s from './ProductGrid.module.css'
-import ProductCard from '@components/product/ProductCard'
-interface Props {
-  className?: string
-  children?: any
-  products: [any] | any
-  layout?: 'A' | 'B' | 'C' | 'D'
-}
-
-const ProductView: FC<Props> = ({ products, className, layout = 'A' }) => {
-  const rootClassName = cn(
-    s.root,
-    {
-      [s.layoutA]: layout === 'A',
-      [s.layoutB]: layout === 'B',
-      [s.layoutC]: layout === 'C',
-      [s.layoutD]: layout === 'D',
-    },
-    className
-  )
-  return (
-    <div className={rootClassName}>
-      {products.map((data: any) => (
-        <ProductCard productData={data.node} />
-      ))}
-    </div>
-  )
-}
-
-export default ProductView
diff --git a/components/product/ProductGrid/index.ts b/components/product/ProductGrid/index.ts
deleted file mode 100644
index eab5466a8..000000000
--- a/components/product/ProductGrid/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './ProductGrid'
diff --git a/components/product/index.ts b/components/product/index.ts
index 1cef2a360..c9459e858 100644
--- a/components/product/index.ts
+++ b/components/product/index.ts
@@ -1,4 +1,3 @@
 export { default as Swatch } from './Swatch'
 export { default as ProductView } from './ProductView'
 export { default as ProductCard } from './ProductCard'
-export { default as ProductGrid } from './ProductGrid'
diff --git a/components/product/ProductGrid/ProductGrid.module.css b/components/ui/Grid/Grid.module.css
similarity index 93%
rename from components/product/ProductGrid/ProductGrid.module.css
rename to components/ui/Grid/Grid.module.css
index ddf614ff2..377d73da8 100644
--- a/components/product/ProductGrid/ProductGrid.module.css
+++ b/components/ui/Grid/Grid.module.css
@@ -3,7 +3,7 @@
   @apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-2 gap-0;
 
   & > * {
-    @apply row-span-1 lg:col-span-1 bg-black border border-yellow-300 box-border overflow-hidden;
+    @apply row-span-1 lg:col-span-1 bg-black box-border overflow-hidden;
     height: 500px;
     max-height: 800px;
 
@@ -35,12 +35,12 @@
 
 .layoutB {
   & > div:nth-child(6n + 2) {
-    @apply row-span-2 lg:col-span-2 bg-violet;
+    @apply row-span-2 lg:col-span-2 bg-blue;
     height: var(--row-height);
   }
 
   & > div:nth-child(6n + 4) {
-    @apply row-span-2 lg:col-span-2 bg-blue;
+    @apply row-span-2 lg:col-span-2 bg-violet;
     height: var(--row-height);
   }
 
diff --git a/components/ui/Grid/Grid.tsx b/components/ui/Grid/Grid.tsx
new file mode 100644
index 000000000..52d8b2b28
--- /dev/null
+++ b/components/ui/Grid/Grid.tsx
@@ -0,0 +1,40 @@
+import cn from 'classnames'
+import { FC, ReactNode, Component } from 'react'
+import s from './Grid.module.css'
+
+interface Props {
+  className?: string
+  children?: any
+  items: [any] | any
+  layout?: 'A' | 'B' | 'C' | 'D'
+  wrapper?: ReactNode | Component | any
+}
+
+const DefaultWrapper: FC<Props> = ({ children }) => <div>{children}</div> // DEFAULT ITEMS WRAPPER
+
+const Grid: FC<Props> = ({
+  items = [],
+  className,
+  layout = 'A',
+  wrapper: Component = DefaultWrapper,
+}) => {
+  const rootClassName = cn(
+    s.root,
+    {
+      [s.layoutA]: layout === 'A',
+      [s.layoutB]: layout === 'B',
+      [s.layoutC]: layout === 'C',
+      [s.layoutD]: layout === 'D',
+    },
+    className
+  )
+  return (
+    <div className={rootClassName}>
+      {items.map((data: any) => (
+        <Component {...data} />
+      ))}
+    </div>
+  )
+}
+
+export default Grid
diff --git a/components/ui/Grid/index.ts b/components/ui/Grid/index.ts
new file mode 100644
index 000000000..ddb51299b
--- /dev/null
+++ b/components/ui/Grid/index.ts
@@ -0,0 +1 @@
+export { default } from './Grid'
diff --git a/components/ui/Marquee/Marquee.module.css b/components/ui/Marquee/Marquee.module.css
new file mode 100644
index 000000000..57f63bede
--- /dev/null
+++ b/components/ui/Marquee/Marquee.module.css
@@ -0,0 +1,11 @@
+.root {
+  @apply bg-white py-10 flex flex-row w-full;
+}
+
+.primary {
+  @apply bg-white;
+}
+
+.secondary {
+  @apply bg-violet;
+}
diff --git a/components/ui/Marquee/Marquee.tsx b/components/ui/Marquee/Marquee.tsx
new file mode 100644
index 000000000..8986ccf3c
--- /dev/null
+++ b/components/ui/Marquee/Marquee.tsx
@@ -0,0 +1,38 @@
+import cn from 'classnames'
+import s from './Marquee.module.css'
+import { FC } from 'react'
+
+interface Props {
+  className?: string
+  children?: any
+  items: any[]
+  wrapper?: React.Component | any
+  variant?: 'primary' | 'secondary'
+}
+
+const DefaultWrapper: FC<Props> = ({ children }) => <div>{children}</div> // DEFAULT PRODUCT WRAPPER
+
+const Marquee: FC<Props> = ({
+  className = '',
+  items,
+  wrapper: Component = DefaultWrapper,
+  variant = 'white',
+}) => {
+  const rootClassName = cn(
+    s.root,
+    {
+      [s.primary]: variant === 'primary',
+      [s.secondary]: variant === 'secondary',
+    },
+    className
+  )
+  return (
+    <div className={rootClassName}>
+      {items.map((p: any) => (
+        <Component {...p} />
+      ))}
+    </div>
+  )
+}
+
+export default Marquee
diff --git a/components/ui/Marquee/index.ts b/components/ui/Marquee/index.ts
new file mode 100644
index 000000000..b59b75568
--- /dev/null
+++ b/components/ui/Marquee/index.ts
@@ -0,0 +1 @@
+export { default } from './Marquee'
diff --git a/components/ui/index.ts b/components/ui/index.ts
index 6367c84a8..ee34f5658 100644
--- a/components/ui/index.ts
+++ b/components/ui/index.ts
@@ -2,3 +2,5 @@ export { default as Button } from './Button'
 export { default as Container } from './Container'
 export { default as Sidebar } from './Sidebar'
 export { default as Logo } from './Logo'
+export { default as Grid } from './Grid'
+export { default as Marquee } from './Marquee'
diff --git a/pages/index.tsx b/pages/index.tsx
index c015aeefe..966add239 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,12 +1,12 @@
 import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
 import { Layout } from '@components/core'
-import { ProductGrid } from '@components/product'
+import { Grid, Marquee } from '@components/ui'
 
 export async function getStaticProps({ preview }: GetStaticPropsContext) {
   const { products } = await getAllProducts()
   return {
-    props: { products: products.slice(0, 6) },
+    props: { products },
   }
 }
 
@@ -15,13 +15,36 @@ export default function Home({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <>
-      <ProductGrid
-        products={[...products, ...products, ...products, ...products]}
-        layout="C"
+      <Grid items={products.slice(0, 3)} />
+      <Marquee
+        items={products.slice(0, 3)}
+        wrapper={(p: any) => (
+          <div className="flex flex-1 justify-end">
+            <img
+              className="w-full"
+              src={p.node.images.edges[0].node.urlSmall}
+            />
+            <span className="bg-black text-white inline-block p-3 font-bold text-2xl break-words">
+              {p.node.name}
+            </span>
+          </div>
+        )}
       />
-      {/* <ProductGrid products={[...products.slice(0, 3)]} layout={2} /> */}
-      {/* <div></div> */}
-      {/* <ProductGrid products={products.slice(3)} /> */}
+      <Grid items={products.slice(3, 6)} layout="B" />
+      <Marquee
+        variant="secondary"
+        items={products.slice(0, 3)}
+        wrapper={() => (
+          <div className="flex flex-1">
+            <h3 className="bg-black text-white inline p-3 font-bold text-2xl">
+              This is a very short title
+            </h3>
+          </div>
+        )}
+      />
+      <div className="bg-black">
+        <h2 className=""> A very long title with a nice description</h2>
+      </div>
     </>
   )
 }