New UI Primitices

components/product/ProductGrid/ProductGrid.tsx

@@ -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

components/product/ProductGrid/index.ts

@@ -1 +0,0 @@
-export { default } from './ProductGrid'

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'

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);
   }
 

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

components/ui/Grid/index.ts

@@ -0,0 +1 @@
+export { default } from './Grid'

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;
+}

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

components/ui/Marquee/index.ts

@@ -0,0 +1 @@
+export { default } from './Marquee'

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'

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>
     </>
   )
 }