update: cover image, show category icon in badge

src/assets/index.ts

@@ -1,10 +1,7 @@
-import Images_ExploreHeader1 from './images/explore_page_header_1.jpg'
-import Images_ExploreHeader2 from './images/shock-the-web.jpg'
-import Category_BG from './images/category-bg.jpg'
-import Image_Hottest_Header from './images/hottest.jfif'
+import CoverImage from './images/cover-image.jpg'
 import Logo from './images/logo.png'
 import LogoLight from './images/logo-light.png'
 
-const ASSETS = { Images_ExploreHeader1, Images_ExploreHeader2, Image_Hottest_Header, Logo, LogoLight, Category_BG }
+const ASSETS = { CoverImage, Logo, LogoLight }
 
 export default ASSETS;

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

@@ -1,5 +1,6 @@
 
 import { MdClose } from 'react-icons/md'
+import ASSETS from 'src/assets'
 import Badge from 'src/Components/Badge/Badge'
 import { Category } from 'src/features/Projects/Components/Categories/Categories'
 import { useProjectsFilters } from '../filters-context'
@@ -28,7 +29,7 @@ export default function Header(props: Props) {
 
     return (
         <div className='h-[280px] rounded-20 overflow-hidden relative text-center flex flex-col justify-center items-center gap-8'>
-            <img src="/assets/images/cover.png" alt="" className='absolute inset-0 opacity-20 w-full h-full object-cover z-[-1]' />
+            <img src={ASSETS.CoverImage} alt="" className='absolute inset-0 opacity-100 w-full h-full object-cover object-bottom z-[-1]' />
             {/* <div className='absolute inset-0 w-full h-full bg-gray-300 bg-opacity-50   z-[-1]' /> */}
             {/* <Link
                 to={PAGES_ROUTES.projects.default}
@@ -48,7 +49,7 @@ export default function Header(props: Props) {
                     {!filtersEmpty && <div className=" ">
                         <p className="text-gray-500 font-medium text-body4 mb-8 mt-8 text-center">filtered by</p>
                         <div className="flex gap-8 flex-wrap">
-                            {filters?.categories && filters.categories.length > 0 && <Badge size='sm'>Category: <span className='font-bold text-gray-700'>{filters.categories[0].name}</span> <button onClick={() => removeFilter("categories")} className='ml-4 text-gray-600 hover:scale-125'><MdClose /></button> </Badge>}
+                            {filters?.categories && filters.categories.length > 0 && <Badge size='sm'>{filters.categories[0]?.icon && <i className={`fa-solid fa-${filters.categories[0]?.icon} mr-4 text-gray-700`}></i>} <span className='font-bold text-gray-700'>{filters.categories[0].name}</span> <button onClick={() => removeFilter("categories")} className='ml-4 text-gray-600 hover:scale-125'><MdClose /></button> </Badge>}
                             {filters?.tags && filters.tags.length > 0 && <Badge size='sm'>🏷️ <span className='font-bold text-gray-700'>{filters.tags.map(t => t.label).join(', ')}</span> <button onClick={() => removeFilter("tags")} className='ml-4 text-gray-600 hover:scale-125'><MdClose /></button> </Badge>}
                             {filters?.yearFounded && <Badge size='sm'>📆 Founded in <span className='font-bold text-gray-700'>{filters.yearFounded}</span> <button onClick={() => removeFilter("yearFounded")} className='ml-4 text-gray-600 hover:scale-125'><MdClose /></button> </Badge>}
                             {filters?.projectStatus && <Badge size='sm'>🌱 Status: <span className='font-bold text-gray-700'>{filters?.projectStatus}</span> <button onClick={() => removeFilter("projectStatus")} className='ml-4 text-gray-600 hover:scale-125'><MdClose /></button> </Badge>}