Added dynamic icons to filters in tools page[Closes #1260]

pages/tools/components/Sidebar.tsx

@@ -1,5 +1,9 @@
 import React, { Dispatch, SetStateAction, useRef } from 'react';
-import FilterIcon from '~/public/icons/filter.svg';
+import LanguageIcon from '~/public/icons/language.svg';
+import ToolingIcon from '~/public/icons/tooling.svg';
+import EnvironmentIcon from '~/public/icons/environment.svg';
+import DialectIcon from '~/public/icons/dialect.svg';
+import LicenseIcon from '~/public/icons/license.svg';
 import DropdownMenu from './ui/DropdownMenu';
 import Checkbox from './ui/Checkbox';
 import SearchBar from './SearchBar';
@@ -8,6 +12,14 @@ import type { Transform } from '../hooks/useToolsTransform';
 import type { FilterCriteriaFields } from '../index.page';
 import { postAnalytics } from '../lib/postAnalytics';
 
+const filterIcons = {
+  languages: LanguageIcon,
+  toolingTypes: ToolingIcon,
+  environments: EnvironmentIcon,
+  drafts: DialectIcon,
+  licenses: LicenseIcon,
+};
+
 interface SidebarProps {
   filterCriteria: Record<FilterCriteriaFields, string[]>;
   transform: Transform;
@@ -79,8 +91,14 @@ export default function Sidebar({
         <SearchBar transform={transform} />
         {filters.map(({ label, accessorKey }) => {
           const checkedValues = transform[accessorKey as keyof Transform] || [];
+          const IconComponent =
+            filterIcons[accessorKey as keyof typeof filterIcons];
           return (
-            <DropdownMenu key={accessorKey} label={label} icon={<FilterIcon />}>
+            <DropdownMenu
+              key={accessorKey}
+              label={label}
+              icon={<IconComponent />}
+            >
               {filterCriteria[accessorKey as FilterCriteriaFields]
                 ?.map(String)
                 .map((filterOption) => (

pages/tools/components/ui/DropdownMenu.tsx

@@ -26,15 +26,15 @@ export default function DropdownMenu({
   }, [router]);
 
   return (
-    <div className='my-2 bg-slate-200 dark:bg-slate-900 p-2 rounded'>
+    <div className='my-2 bg-slate-200 dark:bg-slate-900 p-2 rounded cursor-pointer'>
       <div
         className='w-full flex justify-between items-center align-middle cursor-pointer'
         onClick={() => {
           setIsDropdownOpen((prev) => !prev);
         }}
       >
         {React.cloneElement(icon, {
-          className: 'mr-2',
+          className: 'mr-2 ml-2',
         })}
         <div className='text-slate-900 dark:text-slate-300 font-bold mr-auto'>
           {label}