From 2d347d487beaf0044c093121c15eb29ace604edd Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 12 Oct 2020 10:25:36 -0300
Subject: [PATCH] Search Page

---
 .../cart/CartSidebarView/CartSidebarView.tsx  |  2 +-
 pages/search.tsx                              | 73 +++++++++++++++++++
 2 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 pages/search.tsx

diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index 3731c318f..2d4cfc724 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -77,7 +77,7 @@ const CartSidebarView: FC = () => {
       ) : (
         <>
           <div className="px-4 sm:px-6 flex-1">
-            <h2 className="pt-6 pb-4 text-lg leading-7 font-medium text-gray-900 uppercase">
+            <h2 className="pt-1 pb-4 text-lg leading-7 font-medium text-gray-900 uppercase">
               My Cart
             </h2>
             <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 border-t border-gray-200">
diff --git a/pages/search.tsx b/pages/search.tsx
new file mode 100644
index 000000000..72135d88a
--- /dev/null
+++ b/pages/search.tsx
@@ -0,0 +1,73 @@
+import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
+import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
+import { Layout } from '@components/core'
+import { Grid, Marquee, Hero } from '@components/ui'
+import { ProductCard } from '@components/product'
+import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
+
+export async function getStaticProps({ preview }: GetStaticPropsContext) {
+  const { products } = await getAllProducts()
+  const { categories, brands } = await getSiteInfo()
+
+  return {
+    props: { products, categories, brands },
+  }
+}
+
+export default function Home({
+  products,
+  categories,
+  brands,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return (
+    <div className="grid grid-cols-12 gap-8 mt-3 mb-20">
+      <div className="col-span-2">
+        <ul className="mb-10">
+          <li className="py-1 text-black font-bold tracking-wide">
+            All Categories
+          </li>
+          {categories.map((cat) => (
+            <li key={cat.path} className="py-1 text-gray-800">
+              <a href="#">{cat.name}</a>
+            </li>
+          ))}
+        </ul>
+        <ul>
+          <li className="py-1 text-black font-bold tracking-wide">
+            All Designers
+          </li>
+          {brands.flatMap(({ node }) => (
+            <li key={node.path} className="py-1 text-gray-800">
+              <a href="#">{node.name}</a>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className="col-span-8">
+        <div className="mb-12">
+          Showing 8 results for "<strong>Jacket</strong>"
+        </div>
+        <Grid
+          items={[
+            ...products.slice(6),
+            ...products.slice(6),
+            ...products.slice(6),
+          ]}
+          layout="normal"
+          wrapper={ProductCard}
+        />
+      </div>
+      <div className="col-span-2">
+        <ul>
+          <li className="py-1 text-black font-bold tracking-wide">Relevance</li>
+          <li className="py-1 text-gray-800">Latest arrivals</li>
+          <li className="py-1 text-gray-800">Trending</li>
+          <li className="py-1 text-gray-800">Price: Low to high</li>
+          <li className="py-1 text-gray-800">Price: High to low</li>
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+Home.Layout = Layout