Add outline of the search results page

autogpt_platform/frontend/src/app/[lang]/store/search/page.tsx

@@ -1,10 +1,50 @@
+import AutoGPTServerAPIServerSide from "@/lib/autogpt-server-api/clientServer";
+import { AgentsSection } from "@/components/agptui/composite/AgentsSection";
+import { SearchBar } from "@/components/agptui/SearchBar";
+import { FeaturedCreators } from "@/components/agptui/composite/FeaturedCreators";
+import { Separator } from "@/components/ui/separator";
+import { FilterChips } from "@/components/agptui/FilterChips";
+
 export default async function Page({
   params,
   searchParams,
 }: {
   params: { lang: string };
-  searchParams: { term?: string };
+  searchParams: { searchTerm?: string };
 }) {
-  const searchTerm = searchParams.term || "";
-  return <div>Search Results for: {searchTerm}</div>;
+  const search_term = searchParams.searchTerm || "";
+  const api = new AutoGPTServerAPIServerSide();
+  const { agents } = await api.getStoreAgents({ search_query: search_term });
+  const { creators } = await api.getStoreCreators({ search_query: search_term });
+
+
+  const handleFilterChange = (selectedFilters: string[]) => {
+    console.log(selectedFilters);
+  };
+
+  return (
+    <div>
+      <div className="flex justify-between items-center">
+        <div className="flex flex-col">
+          <h2 className="text-base font-medium font-['Geist'] leading-normal">
+            Results for:
+          </h2>
+          <h1 className="text-2xl font-semibold font-['Poppins'] leading-loose">
+            {search_term}
+          </h1>
+        </div>
+        <div className="w-32 px-6 py-3.5">
+          <SearchBar />
+        </div>
+      </div>
+      <div className="flex justify-between">
+        {/* TODO: Add filter chips */}
+        {/* <FilterChips badges={["All", "Agents", "Creators"]} onFilterChange={handleFilterChange} /> */}
+        <div className="w-32 px-6 py-3.5">Sort By</div>
+      </div>
+      <AgentsSection agents={agents} sectionTitle="Search Results" />
+      <Separator />
+      <FeaturedCreators featuredCreators={creators} />
+    </div>
+  );
 }