add: Search bar

app/globals.css

@@ -22,5 +22,5 @@ body {
 a,
 input,
 button {
-  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-neutral-600 dark:focus-visible:ring-offset-neutral-900;
+  outline: none;
 }

app/page.tsx

@@ -4,6 +4,7 @@ import { Navbar } from 'components/layout/navbar';
 import Search from 'components/layout/navbar/search';
 import { PriceBox } from 'components/price-box';
 import { getCollectionProducts } from 'lib/shopify';
+import type { Product } from 'lib/shopify/types';
 import Image from 'next/image';
 
 //Todo: change to proper metadata
@@ -45,15 +46,154 @@ export default async function HomePage() {
           </div>
         </div>
       </section>
-      <section className="flex">
+      {/* needs to check background-color */}
+      <section className="flex justify-between gap-10 bg-black px-[30px]">
         <Search />
-        <div className="flex">
+        <div className="flex w-full items-center justify-end gap-[10px] text-lightText">
-          Filter by
+          <span className="text-xs opacity-50">Filter by</span>
-          <button>Size</button>
+          <button type="button" className="text-[15px]">
-          <button>Strength</button>
+            Size
+          </button>
+          <button type="button" className="text-[15px]">
+            Strength
+          </button>
         </div>
       </section>
       <Footer />
     </>
   );
 }
+
+//temp: for ProductGridItems test
+const mockProducts: Product[] = [
+  {
+    id: 'prod_001',
+    handle: 'product-1',
+    availableForSale: true,
+    title: 'Product 1',
+    description: 'This is the description for Product 1',
+    descriptionHtml: '<p>This is the <strong>HTML</strong> description for Product 1</p>',
+    options: [
+      {
+        id: 'option_001',
+        name: 'Size',
+        values: ['S', 'M', 'L']
+      }
+    ],
+    priceRange: {
+      maxVariantPrice: {
+        amount: '100.00',
+        currencyCode: 'USD'
+      },
+      minVariantPrice: {
+        amount: '80.00',
+        currencyCode: 'USD'
+      }
+    },
+    featuredImage: {
+      url: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',
+      altText: 'Product 1 Featured Image',
+      width: 500,
+      height: 500
+    },
+    seo: {
+      title: 'Product 1 SEO Title',
+      description: 'This is the SEO description for Product 1'
+    },
+    tags: ['tag1', 'tag2'],
+    updatedAt: new Date().toISOString(),
+    variants: [
+      {
+        id: 'variant_001',
+        title: 'Variant 1',
+        availableForSale: true,
+        selectedOptions: [
+          {
+            name: 'Size',
+            value: 'M'
+          }
+        ],
+        price: {
+          amount: '90.00',
+          currencyCode: 'USD'
+        }
+      }
+    ],
+    images: [
+      {
+        url: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',
+        altText: 'Product 1 Image 1',
+        width: 500,
+        height: 500
+      },
+      {
+        url: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',
+        altText: 'Product 1 Image 2',
+        width: 400,
+        height: 400
+      }
+    ]
+  },
+  {
+    id: 'prod_002',
+    handle: 'product-2',
+    availableForSale: false,
+    title: 'Product 2',
+    description: 'This is the description for Product 2',
+    descriptionHtml: '<p>This is the <strong>HTML</strong> description for Product 2</p>',
+    options: [
+      {
+        id: 'option_002',
+        name: 'Color',
+        values: ['Red', 'Blue', 'Green']
+      }
+    ],
+    priceRange: {
+      maxVariantPrice: {
+        amount: '120.00',
+        currencyCode: 'USD'
+      },
+      minVariantPrice: {
+        amount: '100.00',
+        currencyCode: 'USD'
+      }
+    },
+    featuredImage: {
+      url: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',
+      altText: 'Product 2 Featured Image',
+      width: 500,
+      height: 500
+    },
+    seo: {
+      title: 'Product 2 SEO Title',
+      description: 'This is the SEO description for Product 2'
+    },
+    tags: ['tag3', 'tag4'],
+    updatedAt: new Date().toISOString(),
+    variants: [
+      {
+        id: 'variant_002',
+        title: 'Variant 2',
+        availableForSale: false,
+        selectedOptions: [
+          {
+            name: 'Color',
+            value: 'Red'
+          }
+        ],
+        price: {
+          amount: '110.00',
+          currencyCode: 'USD'
+        }
+      }
+    ],
+    images: [
+      {
+        url: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',
+        altText: 'Product 2 Image 1',
+        width: 500,
+        height: 500
+      }
+    ]
+  }
+];

components/layout/navbar/search.tsx

@@ -8,33 +8,22 @@ export default function Search() {
   const searchParams = useSearchParams();
 
   return (
-    <Form action="/search" className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
+    <Form
+      action="/search"
+      className="w-max-[550px] flex w-full gap-[10px] px-5 py-4 lg:w-80 xl:w-full"
+    >
+      <div className="flex h-full items-center text-lightText">
+        <MagnifyingGlassIcon className="h-4 stroke-2" />
+      </div>
       <input
         key={searchParams?.get('q')}
         type="text"
         name="q"
-        placeholder="Search for products..."
+        placeholder="eg. Finos Rerserva"
         autoComplete="off"
         defaultValue={searchParams?.get('q') || ''}
-        className="text-md w-full rounded-lg border bg-white px-4 py-2 text-black placeholder:text-neutral-500 md:text-sm dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
+        className="w-full bg-inherit text-base text-lightText placeholder:text-lightText/50 md:text-sm"
       />
-      <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
-        <MagnifyingGlassIcon className="h-4" />
-      </div>
     </Form>
   );
 }
-
-export function SearchSkeleton() {
-  return (
-    <form className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
-      <input
-        placeholder="Search for products..."
-        className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
-      />
-      <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
-        <MagnifyingGlassIcon className="h-4" />
-      </div>
-    </form>
-  );
-}