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'