handle sorting of agents

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

@@ -82,6 +82,26 @@ function SearchResults({
     }
   };
 
+  const handleSortChange = (sortValue: string) => {
+    
+    let sortBy = "recent";
+    if (sortValue === "runs") {
+      sortBy = "runs";
+    } else if (sortValue === "rating") {
+      sortBy = "rating";
+    }
+    const sortedAgents = [...agents].sort((a, b) => {
+      if (sortBy === "runs") {
+        return b.runs - a.runs;
+      } else if (sortBy === "rating") {
+        return b.rating - a.rating;
+      } else {
+        return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime();
+      }
+    });
+    setAgents(sortedAgents);
+  };
+
   return (
     <div className="w-full">
       <div className="mx-auto min-h-screen max-w-[1440px] px-10 lg:min-w-[1440px]">
@@ -112,7 +132,7 @@ function SearchResults({
                 creatorsCount={creatorsCount}
                 onFilterChange={handleFilterChange}
               />
-              <SortDropdown />
+              <SortDropdown onSort={handleSortChange} />
             </div>
             {/* Content section */}
             <div className="min-h-[500px] max-w-[1440px]">

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

@@ -10,11 +10,9 @@ import {
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 
 const sortOptions: SortOption[] = [
-  { label: "Trending", value: "trending" },
   { label: "Most Recent", value: "recent" },
-  { label: "Most Popular", value: "popular" },
-  { label: "Highest Rated", value: "rating" },
   { label: "Most Runs", value: "runs" },
+  { label: "Highest Rated", value: "rating" },
 ];
 
 interface SortOption {
@@ -22,11 +20,14 @@ interface SortOption {
   value: string;
 }
 
-export const SortDropdown: React.FC = () => {
+export const SortDropdown: React.FC<{
+  onSort: (sortValue: string) => void;
+}> = ({ onSort }) => {
   const [selected, setSelected] = React.useState(sortOptions[0]);
 
   const handleSelect = (option: SortOption) => {
     setSelected(option);
+    onSort(option.value);
     console.log(`Sorting by: ${option.label} (${option.value})`);
   };