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