wip

apps/website/app/leagues/page.tsx

@@ -6,6 +6,7 @@ import LeagueCard from '@/components/alpha/LeagueCard';
 import CreateLeagueForm from '@/components/alpha/CreateLeagueForm';
 import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
+import Input from '@/components/ui/Input';
 import { League } from '@gridpilot/racing-domain/entities/League';
 import { getLeagueRepository } from '@/lib/di-container';
 
@@ -14,6 +15,8 @@ export default function LeaguesPage() {
   const [leagues, setLeagues] = useState<League[]>([]);
   const [loading, setLoading] = useState(true);
   const [showCreateForm, setShowCreateForm] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortBy, setSortBy] = useState('name');
 
   useEffect(() => {
     loadLeagues();
@@ -35,6 +38,24 @@ export default function LeaguesPage() {
     router.push(`/leagues/${leagueId}`);
   };
 
+  const filteredLeagues = leagues
+    .filter((league) => {
+      const matchesSearch =
+        league.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        league.description.toLowerCase().includes(searchQuery.toLowerCase());
+      return matchesSearch;
+    })
+    .sort((a, b) => {
+      switch (sortBy) {
+        case 'name':
+          return a.name.localeCompare(b.name);
+        case 'recent':
+          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+        default:
+          return 0;
+      }
+    });
+
   if (loading) {
     return (
       <div className="max-w-6xl mx-auto">
@@ -49,8 +70,8 @@ export default function LeaguesPage() {
           <div>
             <h1 className="text-3xl font-bold text-white mb-2">Leagues</h1>
             <p className="text-gray-400">
-              {leagues.length === 0 
-                ? 'Create your first league to get started' 
+              {leagues.length === 0
+                ? 'Create your first league to get started'
                 : `${leagues.length} ${leagues.length === 1 ? 'league' : 'leagues'} available`}
             </p>
           </div>
@@ -75,6 +96,38 @@ export default function LeaguesPage() {
           </Card>
         )}
 
+        {leagues.length > 0 && (
+          <Card className="mb-8">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-400 mb-2">
+                  Search Leagues
+                </label>
+                <Input
+                  type="text"
+                  placeholder="Search by name or description..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-400 mb-2">
+                  Sort By
+                </label>
+                <select
+                  className="w-full px-3 py-3 bg-iron-gray border-0 rounded-md text-white ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-primary-blue transition-all duration-150 text-sm"
+                  value={sortBy}
+                  onChange={(e) => setSortBy(e.target.value)}
+                >
+                  <option value="name">Name</option>
+                  <option value="recent">Most Recent</option>
+                </select>
+              </div>
+            </div>
+          </Card>
+        )}
+
         {leagues.length === 0 ? (
           <Card className="text-center py-12">
             <div className="text-gray-400">
@@ -105,16 +158,28 @@ export default function LeaguesPage() {
             </div>
           </Card>
         ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {leagues.map((league) => (
-              <LeagueCard
-                key={league.id}
-                league={league}
-                onClick={() => handleLeagueClick(league.id)}
-              />
-            ))}
-          </div>
-          )}
+          <>
+            <div className="mb-4">
+              <p className="text-sm text-gray-400">
+                {filteredLeagues.length} {filteredLeagues.length === 1 ? 'league' : 'leagues'} found
+              </p>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {filteredLeagues.map((league) => (
+                <LeagueCard
+                  key={league.id}
+                  league={league}
+                  onClick={() => handleLeagueClick(league.id)}
+                />
+              ))}
+            </div>
+            {filteredLeagues.length === 0 && (
+              <div className="text-center py-12">
+                <p className="text-gray-400">No leagues found matching your search.</p>
+              </div>
+            )}
+          </>
+        )}
       </div>
     );
   }