diff --git a/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css new file mode 100644 index 000000000..464087ebc --- /dev/null +++ b/components/core/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; + } +} diff --git a/components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx new file mode 100644 index 000000000..fc58486cd --- /dev/null +++ b/components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx @@ -0,0 +1,66 @@ +import { FC } from 'react' +import Link from 'next/link' +import { getCategoryPath, getDesignerPath } from '@utils/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 = ({ categories, brands, newestProducts }) => { + return ( +
+
+
+ + +
+
+
+ + {newestProducts.map(({ node }: any) => ( + + ))} + +
+
+ ) +} + +export default Head diff --git a/components/core/HomeAllProductsGrid/index.ts b/components/core/HomeAllProductsGrid/index.ts new file mode 100644 index 000000000..31d313d16 --- /dev/null +++ b/components/core/HomeAllProductsGrid/index.ts @@ -0,0 +1 @@ +export { default } from './HomeAllProductsGrid' diff --git a/pages/index.tsx b/pages/index.tsx index 64443f536..48777bea5 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -5,11 +5,10 @@ import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products' import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info' import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages' import rangeMap from '@lib/range-map' -import { getCategoryPath, getDesignerPath } from '@utils/search' import { Layout } from '@components/core' import { Grid, Marquee, Hero } from '@components/ui' import { ProductCard } from '@components/product' -import Link from 'next/link' +import HomeAllProductsGrid from '@components/core/HomeAllProductsGrid' export async function getStaticProps({ preview, @@ -129,53 +128,11 @@ export default function Home({ /> ))} -
-
-
- - -
-
-
- - {newestProducts.map(({ node }) => ( - - ))} - -
-
+ ) }