first commit

app/products/page.tsx

@@ -0,0 +1,33 @@
+import SearchFilters from "./SearchFilters";
+import { Suspense } from "react";
+
+interface ProductsPageProps {
+  searchParams: Promise<{
+    category?: string; // Optional query string: ?category=shoes
+    sort?: string; // Optional query string: ?sort=asc
+  }>;
+}
+
+export default async function ProductsPage({
+  searchParams,
+}: ProductsPageProps) {
+  // Await the searchParams Promise
+  const { category = "all", sort = "featured" } = await searchParams;
+
+  return (
+    <main className="p-2 m-2 ">
+      <h1>Products Catalog</h1>
+      <p>
+        Server Params Filter Category: <strong>{category}</strong>
+      </p>
+      <p>
+        Server Params Sorting By: <strong>{sort}</strong>
+      </p>
+
+      {/* Render the Client Component inside a Suspense boundary */}
+      <Suspense fallback={<div>Loading filters...</div>}>
+        <SearchFilters />
+      </Suspense>
+    </main>
+  );
+}