Grid and Marquee Updated

components/product/ProductCard/ProductCard.tsx

@@ -1,12 +1,12 @@
 import cn from 'classnames'
 import s from './ProductCard.module.css'
-import { FC } from 'react'
+import { FC, ReactNode, Component } from 'react'
 import { Heart } from '@components/icon'
 import Link from 'next/link'
 
 interface Props {
   className?: string
-  children?: any
+  children?: ReactNode[] | Component[] | any[]
   node: ProductData
   variant?: 'slim'
 }

components/ui/Grid/Grid.tsx

@@ -4,20 +4,15 @@ import s from './Grid.module.css'
 
 interface Props {
   className?: string
-  children?: any
-  items: [any] | any
+  children?: ReactNode[] | Component[] | any[]
   layout?: 'A' | 'B' | 'C' | 'D' | 'normal'
-  wrapper?: ReactNode | Component | any
   variant?: 'default' | 'filled'
 }
 
-const DefaultWrapper: FC<Props> = ({ children }) => <div>{children}</div> // DEFAULT ITEMS WRAPPER
-
 const Grid: FC<Props> = ({
-  items = [],
   className,
   layout = 'A',
-  wrapper: Component = DefaultWrapper,
+  children,
   variant = 'default',
 }) => {
   const rootClassName = cn(
@@ -33,13 +28,7 @@ const Grid: FC<Props> = ({
     },
     className
   )
-  return (
-    <div className={rootClassName}>
-      {items.map((data: any, i: any) => (
-        <Component key={i} {...data} />
-      ))}
-    </div>
-  )
+  return <div className={rootClassName}>{children}</div>
 }
 
 export default Grid

components/ui/Marquee/Marquee.tsx

@@ -1,24 +1,15 @@
 import cn from 'classnames'
 import s from './Marquee.module.css'
-import { FC } from 'react'
+import { FC, ReactNode, Component } from 'react'
 import Ticker from 'react-ticker'
 
 interface Props {
   className?: string
-  children?: any
-  items: any[]
-  wrapper?: React.Component | any
+  children?: ReactNode[] | Component[] | any[]
   variant?: 'primary' | 'secondary'
 }
 
-const DefaultWrapper: FC<Props> = ({ children }) => <div>{children}</div> // DEFAULT PRODUCT WRAPPER
-
-const M: FC<Props> = ({
-  className = '',
-  items,
-  wrapper: Component = DefaultWrapper,
-  variant = 'primary',
-}) => {
+const M: FC<Props> = ({ className = '', children, variant = 'primary' }) => {
   const rootClassName = cn(
     s.root,
     {
@@ -41,13 +32,7 @@ const M: FC<Props> = ({
   return (
     <div className={rootClassName}>
       <Ticker offset={80}>
-        {({ index }) => (
-          <div className={s.container}>
-            {items.map((p: any, i: any) => (
-              <Component key={i} {...p} />
-            ))}
-          </div>
-        )}
+        {({ index }) => <div className={s.container}>{children}</div>}
       </Ticker>
     </div>
   )

pages/index.tsx

@@ -23,11 +23,16 @@ export default function Home({
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
     <div className="mt-3">
-      <Grid items={products.slice(0, 3)} wrapper={ProductCard} />
-      <Marquee
-        items={products.slice(0, 3)}
-        wrapper={(p: any) => <ProductCard {...p} variant="slim" />}
-      />
+      <Grid>
+        {products.slice(0, 3).map((p: any) => (
+          <ProductCard key={p.id} {...p} />
+        ))}
+      </Grid>
+      <Marquee variant="secondary">
+        {products.slice(0, 3).map((p: any) => (
+          <ProductCard key={p.id} {...p} variant="slim" />
+        ))}
+      </Marquee>
       <Hero
         headline="Release Details: The Yeezy BOOST 350 V2 ‘Natural'"
         description="
@@ -38,12 +43,16 @@ export default function Home({
         Hebrew. It’s now undergone a name change, and will be referred to as
         ‘Natural’."
       />
-      <Grid items={products.slice(3, 6)} layout="B" wrapper={ProductCard} />
-      <Marquee
-        items={[...products.slice(3, 6)]}
-        variant="secondary"
-        wrapper={(p: any) => <ProductCard {...p} variant="slim" />}
-      />
+      <Grid layout="B">
+        {products.slice(3, 6).map((p: any) => (
+          <ProductCard key={p.id} {...p} />
+        ))}
+      </Grid>
+      <Marquee>
+        {products.slice(0, 3).map((p: any) => (
+          <ProductCard key={p.id} {...p} variant="slim" />
+        ))}
+      </Marquee>
       <div className="py-12 flex flex-row w-full px-12">
         <div className="pr-3 w-48">
           <ul className="mb-10">
@@ -68,15 +77,11 @@ export default function Home({
           </ul>
         </div>
         <div className="flex-1">
-          <Grid
-            items={[
-              ...products.slice(6),
-              ...products.slice(6),
-              ...products.slice(6),
-            ]}
-            layout="normal"
-            wrapper={ProductCard}
-          />
+          <Grid layout="normal">
+            {products.map((p: any) => (
+              <ProductCard key={p.id} {...p} />
+            ))}
+          </Grid>
         </div>
       </div>
     </div>