update: empty search state, change "all projects" tab to "search resutls" on filtering

src/features/Projects/Components/Categories/Categories.tsx

@@ -20,6 +20,7 @@ const colors = [
 export type Category = Pick<CategoryList, 'id' | 'name' | 'icon' | 'projectsCount'>
 
 interface Props {
+    filtersActive?: boolean;
     value: Category | null
     onChange?: (v: Category | null) => void
 }
@@ -60,7 +61,7 @@ export default function Categories(props: Props) {
                             flex flex-col font-medium hover:bg-gray-100 active:bg-gray-200 rounded-t-8 px-16 py-16 min-w-max
                             ${props.value === null ? "text-primary-500 border-b-2 border-primary-500" : "text-gray-500"} 
                             `}
-                    >All projects</button>
+                    >{props.filtersActive ? "Search results" : "All projects"}</button>
                     {sortedByAppsCount.map((category, idx) =>
                         <button
                             key={category!.id}

src/features/Projects/pages/ExplorePage/ExplorePage.tsx

@@ -125,7 +125,7 @@ export default function ExplorePage() {
                     category={selectedCategory}
                 />
                 <div className="grid grid-cols-[1fr_auto] items-center gap-32">
-                    <div className="min-w-0"><Categories value={selectedCategory} onChange={v => selectCategoryTab(v)} /></div>
+                    <div className="min-w-0"><Categories filtersActive={!!queryFilters} value={selectedCategory} onChange={v => selectCategoryTab(v)} /></div>
                     <Button
                         className={`self-center ${!!queryFilters ? "!font-bold !bg-primary-50 !text-primary-600 !border-2 !border-primary-400" : "!text-gray-600"}`}
                         variant='outline'

src/features/Projects/pages/ExplorePage/ProjectsGrid/ProjectsGrid.tsx

@@ -31,6 +31,7 @@ export default function ProjectsGrid({ isLoading, projects }: Props) {
             gridGap: '24px',
         }}>
             {isLoading && Array(12).fill(0).map((_, idx) => <ProjectCardMiniSkeleton key={idx} />)}
+            {!isLoading && projects.length === 0 && <p className="text-center text-gray-400 py-48 text-body2 font-medium col-span-full">No results found here...</p>}
             {!isLoading && projects.map((project) => <ProjectCardMini key={project.id} project={project} onClick={handleClick} />)}
         </div>
     )