Renaming to common

components/common/HomeAllProductsGrid/HomeAllProductsGrid.module.css

@@ -0,0 +1,23 @@
+.root {
+  @apply py-12 flex flex-col w-full px-6;
+
+  @screen md {
+    @apply flex-row;
+  }
+
+  & .asideWrapper {
+    @apply pr-3 w-full relative;
+
+    @screen md {
+      @apply w-48;
+    }
+  }
+
+  & .aside {
+    @apply flex flex-row w-full justify-around mb-12;
+
+    @screen md {
+      @apply mb-0 block sticky top-32;
+    }
+  }
+}

components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx

@@ -0,0 +1,66 @@
+import { FC } from 'react'
+import Link from 'next/link'
+import { getCategoryPath, getDesignerPath } from '@lib/search'
+import { Grid } from '@components/ui'
+import { ProductCard } from '@components/product'
+import s from './HomeAllProductsGrid.module.css'
+
+interface Props {
+  categories?: any
+  brands?: any
+  newestProducts?: any
+}
+
+const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
+  return (
+    <div className={s.root}>
+      <div className={s.asideWrapper}>
+        <div className={s.aside}>
+          <ul className="mb-10">
+            <li className="py-1 text-base font-bold tracking-wide">
+              <Link href={getCategoryPath('')}>
+                <a>All Categories</a>
+              </Link>
+            </li>
+            {categories.map((cat: any) => (
+              <li key={cat.path} className="py-1 text-accents-8">
+                <Link href={getCategoryPath(cat.path)}>
+                  <a>{cat.name}</a>
+                </Link>
+              </li>
+            ))}
+          </ul>
+          <ul className="">
+            <li className="py-1 text-base font-bold tracking-wide">
+              <Link href={getDesignerPath('')}>
+                <a>All Designers</a>
+              </Link>
+            </li>
+            {brands.flatMap(({ node }: any) => (
+              <li key={node.path} className="py-1 text-accents-8">
+                <Link href={getDesignerPath(node.path)}>
+                  <a>{node.name}</a>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+      <div className="flex-1">
+        <Grid layout="normal">
+          {newestProducts.map(({ node }: any) => (
+            <ProductCard
+              key={node.path}
+              product={node}
+              variant="simple"
+              imgWidth={480}
+              imgHeight={480}
+            />
+          ))}
+        </Grid>
+      </div>
+    </div>
+  )
+}
+
+export default Head

components/common/HomeAllProductsGrid/index.ts

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