Search results styling and filter functionality

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

@@ -1,4 +1,7 @@
-import AutoGPTServerAPIServerSide from "@/lib/autogpt-server-api/clientServer";
+"use client";
+
+import { useState } from "react";
+import AutoGPTServerAPIClient from "@/lib/autogpt-server-api/client";
 import { AgentsSection } from "@/components/agptui/composite/AgentsSection";
 import { SearchBar } from "@/components/agptui/SearchBar";
 import { FeaturedCreators } from "@/components/agptui/composite/FeaturedCreators";
@@ -16,10 +19,10 @@ export default async function Page({
   const search_term = searchParams.searchTerm || "";
   const sort = searchParams.sort || "trending";
   
-  const api = new AutoGPTServerAPIServerSide();
+  const api = new AutoGPTServerAPIClient();
   const { agents } = await api.getStoreAgents({ 
     search_query: search_term,
-    sort: sort 
+    sorted_by: sort 
   });
   const { creators } = await api.getStoreCreators({
     search_query: search_term,
@@ -29,19 +32,65 @@ export default async function Page({
   const creatorsCount = creators?.length || 0;
   const totalCount = agentsCount + creatorsCount;
 
+  // Move state to client component
+  return (
+    <SearchResults 
+      search_term={search_term}
+      agents={agents}
+      creators={creators}
+      agentsCount={agentsCount} 
+      creatorsCount={creatorsCount}
+      totalCount={totalCount}
+    />
+  );
+}
+
+function SearchResults({
+  search_term,
+  agents,
+  creators,
+  agentsCount,
+  creatorsCount, 
+  totalCount
+}: {
+  search_term: string;
+  agents: any[];
+  creators: any[];
+  agentsCount: number;
+  creatorsCount: number;
+  totalCount: number;
+}) {
+  const [filter, setFilter] = useState("all");
+  const [showAgents, setShowAgents] = useState(true);
+  const [showCreators, setShowCreators] = useState(true);
+
+  const handleFilterChange = (value: string) => {
+    setFilter(value);
+    if (value === "agents") {
+      setShowAgents(true);
+      setShowCreators(false);
+    } else if (value === "creators") {
+      setShowAgents(false);
+      setShowCreators(true);
+    } else {
+      setShowAgents(true);
+      setShowCreators(true);
+    }
+  };
+
   return (
     <div className="w-full bg-white">
-      <div className="px-10 max-w-[1440px] mx-auto">
+      <div className="px-10 max-w-[1440px] mx-auto min-h-screen">
         <div className="flex items-center mt-8">
-          <div className="flex-1 min-w-[910px]">
-            <h2 className="font-['Geist'] text-base font-medium text-neutral-800">
+          <div className="flex-1">
+            <h2 className="font-['Poppins'] text-base font-medium text-neutral-800">
               Results for:
             </h2>
             <h1 className="font-['Poppins'] text-2xl font-semibold text-neutral-800">
               {search_term}
             </h1>
           </div>
-          <div className="flex-none ml-auto">
+          <div className="flex-none">
             <SearchBar width="w-[439px]" />
           </div>
         </div>
@@ -50,29 +99,26 @@ export default async function Page({
           <>
             <div className="mt-8 flex justify-between items-center">
               <SearchFilterChips 
-              
                 totalCount={totalCount}
                 agentsCount={agentsCount}
                 creatorsCount={creatorsCount}
+                onFilterChange={handleFilterChange}
               />
               <SortDropdown />
             </div>
-
-            {agentsCount > 0 && (
-              <div className="mt-8">
-                <h2 className="text-neutral-800 text-lg font-semibold font-['Poppins'] mb-4">Agents</h2>
-                <AgentsSection agents={agents} sectionTitle="Search Results" />
-              </div>
-            )}
-            
-            {agentsCount > 0 && creatorsCount > 0 && <Separator className="my-6" />}
-            
-            {creatorsCount > 0 && (
-              <div className="mt-8">
-                <h2 className="text-neutral-800 text-lg font-semibold font-['Poppins'] mb-4">Creators</h2>
-                <FeaturedCreators featuredCreators={creators} />
-              </div>
-            )}
+            {/* Content section */}
+            <div className="max-w-[1440px] min-h-[500px]">
+              {showAgents && agentsCount > 0 && (
+                <div className="mt-8">
+                  <AgentsSection agents={agents} sectionTitle="Agents" />
+                </div>
+              )}
+              
+              {showAgents && agentsCount > 0 && creatorsCount > 0 && <Separator />}
+              {showCreators && creatorsCount > 0 && (
+                <FeaturedCreators featuredCreators={creators} title="Creators" />
+              )}
+            </div>
           </>
         ) : (
           <div className="flex flex-col items-center justify-center mt-20">

autogpt_platform/frontend/src/components/agptui/SearchFilterChips.tsx

@@ -12,12 +12,14 @@ interface SearchFilterChipsProps {
   totalCount?: number;
   agentsCount?: number;
   creatorsCount?: number;
+  onFilterChange?: (value: string) => void;
 }
 
 export const SearchFilterChips: React.FC<SearchFilterChipsProps> = ({
   totalCount = 10,
   agentsCount = 8,
   creatorsCount = 2,
+  onFilterChange,
 }) => {
   const [selected, setSelected] = React.useState("all");
 
@@ -29,6 +31,7 @@ export const SearchFilterChips: React.FC<SearchFilterChipsProps> = ({
 
   const handleFilterClick = (value: string) => {
     setSelected(value);
+    onFilterChange?.(value);
     console.log(`Filter selected: ${value}`);
   };
 

autogpt_platform/frontend/src/components/agptui/composite/AgentsSection.tsx

@@ -77,7 +77,7 @@ export const AgentsSection: React.FC<AgentsSectionProps> = ({
               </CarouselContent>
             </Carousel>
 
-            <div className="hidden grid-cols-1 place-items-center gap-6 md:grid md:grid-cols-2 lg:grid-cols-3">
+            <div className="hidden grid-cols-1 place-items-center gap-6 md:grid md:grid-cols-2 lg:grid-cols-4">
               {displayedAgents.map((agent, index) => (
                 <StoreCard
                   key={index}

autogpt_platform/frontend/src/components/agptui/composite/FeaturedCreators.tsx

@@ -13,11 +13,13 @@ export interface FeaturedCreator {
 }
 
 interface FeaturedCreatorsProps {
+  title?: string;
   featuredCreators: FeaturedCreator[];
 }
 
 export const FeaturedCreators: React.FC<FeaturedCreatorsProps> = ({
   featuredCreators,
+  title = "Featured Creators",
 }) => {
   const router = useRouter();
 
@@ -32,7 +34,7 @@ export const FeaturedCreators: React.FC<FeaturedCreatorsProps> = ({
     <div className="flex w-full flex-col items-center justify-center py-16">
       <div className="w-full max-w-[1360px]">
         <h2 className="font-poppins mb-8 text-2xl font-semibold leading-7 text-neutral-800">
-          Featured creators
+          {title}
         </h2>
 
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">