first commit

app/products/SearchFilters.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+
+export default function SearchFilters() {
+  const searchParams = useSearchParams();
+
+  // Read parameters using standard URLSearchParams methods (.get())
+  const category = searchParams.get("category") ?? "all";
+  const sort = searchParams.get("sort") ?? "featured";
+
+  return (
+    <div
+      style={{ border: "1px solid #ccc", padding: "1rem", borderRadius: "8px" }}
+    >
+      <h3>Active Client Filters</h3>
+      <p>
+        Client Current Category: <strong>{category}</strong>
+      </p>
+      <p>
+        Client Current Sort Order: <strong>{sort}</strong>
+      </p>
+    </div>
+  );
+}

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>
+  );
+}