feat: implement YMM filters

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

app/page.tsx

@@ -1,4 +1,5 @@
 import { Carousel } from 'components/carousel';
+import YMMFilters, { YMMFiltersPlaceholder } from 'components/filters';
 import { ThreeItemGrid } from 'components/grid/three-items';
 import Footer from 'components/layout/footer';
 import { Suspense } from 'react';
@@ -15,6 +16,11 @@ export const metadata = {
 export default async function HomePage() {
   return (
     <>
+      <section className="mx-auto max-w-screen-2xl px-4 pb-4">
+        <Suspense fallback={<YMMFiltersPlaceholder />}>
+          <YMMFilters />
+        </Suspense>
+      </section>
       <ThreeItemGrid />
       <Suspense>
         <Carousel />

app/search/[collection]/page.tsx

@@ -4,6 +4,7 @@ import { notFound } from 'next/navigation';
 
 import Breadcrumb from 'components/breadcrumb';
 import BreadcrumbHome from 'components/breadcrumb/breadcrumb-home';
+import YMMFilters, { YMMFiltersPlaceholder } from 'components/filters';
 import Grid from 'components/grid';
 import ProductsList from 'components/layout/products-list';
 import { getProductsInCollection } from 'components/layout/products-list/actions';
@@ -92,6 +93,11 @@ export default function CategorySearchPage(props: {
       <Suspense fallback={<HeaderPlaceholder />}>
         <Header collection={props.params.collection} />
       </Suspense>
+      <div className="my-3">
+        <Suspense fallback={<YMMFiltersPlaceholder />}>
+          <YMMFilters />
+        </Suspense>
+      </div>
       <Suspense fallback={<ProductsGridPlaceholder />}>
         <CategoryPage {...props} />
       </Suspense>

app/search/page.tsx

@@ -1,7 +1,9 @@
+import YMMFilters, { YMMFiltersPlaceholder } from 'components/filters';
 import Grid from 'components/grid';
 import ProductsList from 'components/layout/products-list';
 import { searchProducts } from 'components/layout/products-list/actions';
 import SortingMenu from 'components/layout/search/sorting-menu';
+import { Suspense } from 'react';
 export const runtime = 'edge';
 
 export const metadata = {
@@ -20,7 +22,10 @@ export default async function SearchPage({
 
   return (
     <>
-      <div className="flex w-full justify-end">
+      <Suspense fallback={<YMMFiltersPlaceholder />}>
+        <YMMFilters />
+      </Suspense>
+      <div className="my-3 flex w-full justify-end">
         <SortingMenu />
       </div>
       {searchValue ? (