New UI Primitices

components/product/ProductGrid/ProductGrid.module.css

@@ -1,86 +0,0 @@
-.root {
-  --row-height: calc(100vh - 80px - 56px);
-  @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;
-    height: 500px;
-    max-height: 800px;
-
-    @screen lg {
-      height: inherit;
-    }
-  }
-}
-
-.layoutA {
-  & > div:nth-child(6n + 1),
-  & > div:nth-child(6n + 5) {
-    @apply row-span-2 lg:col-span-2 bg-violet;
-    height: var(--row-height);
-  }
-
-  & > div:nth-child(6n + 5) {
-    @apply bg-blue;
-  }
-
-  & > div:nth-child(6n + 3) {
-    @apply bg-pink;
-  }
-
-  & > div:nth-child(6n + 6) {
-    @apply bg-cyan;
-  }
-}
-
-.layoutB {
-  & > div:nth-child(6n + 2) {
-    @apply row-span-2 lg:col-span-2 bg-violet;
-    height: var(--row-height);
-  }
-
-  & > div:nth-child(6n + 4) {
-    @apply row-span-2 lg:col-span-2 bg-blue;
-    height: var(--row-height);
-  }
-
-  & > div:nth-child(6n + 3) {
-    @apply bg-pink;
-  }
-
-  & > div:nth-child(6n + 6) {
-    @apply bg-cyan;
-  }
-}
-
-.layoutC {
-  & > div:nth-child(12n + 1) {
-    @apply row-span-2 lg:col-span-2 bg-violet;
-    height: var(--row-height);
-  }
-
-  & > div:nth-child(12n + 8) {
-    @apply row-span-2 lg:col-span-2 bg-cyan;
-    height: var(--row-height);
-  }
-
-  & > div:nth-child(6n + 3) {
-    @apply bg-pink;
-  }
-}
-
-.layoutD {
-  & > div:nth-child(12n + 2) {
-    @apply row-span-2 lg:col-span-2 bg-violet;
-    height: var(--row-height);
-  }
-
-  & > div:nth-child(12n + 7) {
-    @apply row-span-2 lg:col-span-2 bg-cyan;
-    height: var(--row-height);
-  }
-
-  & > div:nth-child(6n + 3) {
-    @apply bg-pink;
-  }
-}

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'