diff --git a/frontend/src/pages/Posts.tsx b/frontend/src/pages/Posts.tsx index 71441bbe..84b4d11d 100644 --- a/frontend/src/pages/Posts.tsx +++ b/frontend/src/pages/Posts.tsx @@ -12,6 +12,7 @@ const Posts = () => { const [tagInput, setTagInput] = useState(''); const [filterTags, setFilterTags] = useState([]); const filterRef = useRef(null); + const [searchQuery, setSearchQuery] = useState(''); useEffect(() => { const fetchPosts = async () => { @@ -64,11 +65,14 @@ const Posts = () => { }; const filteredPosts = posts.filter(post => - filterTags.every(tag => post.tags.map(t => t.toLowerCase()).includes(tag)) + filterTags.every(tag => post.tags.map(t => t.toLowerCase()).includes(tag)) && + (post.title.toLowerCase().includes(searchQuery.toLowerCase()) || + post.description.toLowerCase().includes(searchQuery.toLowerCase()) || + post.author.username.toLowerCase().includes(searchQuery.toLowerCase())) ); if (loading) { - return ; + return ; } if (error) { @@ -126,10 +130,17 @@ const Posts = () => { )} + setSearchQuery(e.target.value)} + placeholder="🔍 Search anything" + className="p-2 w-full max-w-xs rounded-md bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-blue-500" + />
- {filteredPosts.map((post) => ( - + {filteredPosts.map((post, index) => ( + ))}