diff --git a/app/organizations/organizations-client.tsx b/app/organizations/organizations-client.tsx index dc1dc0e..b3451e9 100644 --- a/app/organizations/organizations-client.tsx +++ b/app/organizations/organizations-client.tsx @@ -1,8 +1,8 @@ 'use client' -import { useState, useEffect, useCallback, useMemo, useRef, startTransition } from 'react' +import { useState, useEffect, useCallback, useMemo, useRef, startTransition, useId } from 'react' import { useRouter, useSearchParams } from 'next/navigation' -import { Search, X } from 'lucide-react' +import { Search, X, Filter } from 'lucide-react' import { Button, Input, SectionHeader } from '@/components/ui' import { Organization, PaginatedResponse } from '@/lib/api' import { OrganizationCard } from '@/components/organization-card' @@ -22,9 +22,11 @@ interface OrganizationsClientProps { export function OrganizationsClient({ initialData, initialPage, initialTechs, firstTimeCount }: OrganizationsClientProps) { const router = useRouter() const searchParams = useSearchParams() + const filtersTitleId = useId() const [data, setData] = useState>(initialData) const [isLoading, setIsLoading] = useState(false) const [currentPage, setCurrentPage] = useState(initialPage) + const [isMobileFiltersOpen, setIsMobileFiltersOpen] = useState(false) const isInitialMount = useRef(true) const lastFetchParams = useRef('') const lastUrlString = useRef('') @@ -338,15 +340,27 @@ export function OrganizationsClient({ initialData, initialPage, initialTechs, fi className="max-w-3xl mx-auto mb-8" /> {/* Search Bar */} -
- - setSearchInput(e.target.value)} - /> +
+
+ + setSearchInput(e.target.value)} + /> +
+
+ +
{/* Filter Chips Row */} @@ -556,6 +570,52 @@ export function OrganizationsClient({ initialData, initialPage, initialTechs, fi )}
+ + {/* Mobile Filters Overlay */} + {isMobileFiltersOpen && ( +
+ {/* Overlay backdrop */} +
setIsMobileFiltersOpen(false)} + aria-hidden="true" + /> + {/* Sidebar Drawer */} +
+
+

Filters

+ +
+
+
+ +
+
+
+ +
+
+
+ )}
) }