feat: add empty state to filters

apps/website/src/components/table-issues/filters/filter-with-checkboxes.tsx

@@ -16,11 +16,10 @@ type Props = {
     color?: ColorTokens | `#${string}`
   }[]
   label: string
-  noResultsText?: string
   noPadding?: boolean
 }
 const FilterWithCheckboxes = (props: Props) => {
-  const { data, label, noResultsText, noPadding } = props
+  const { data, label, noPadding } = props
 
   const [filterText, setFilterText] = useState('')
 
@@ -91,8 +90,24 @@ const FilterWithCheckboxes = (props: Props) => {
             )
           })}
           {filteredData.length === 0 && (
-            <div className="p-2 py-1">
-              <Text size={13}>{noResultsText}</Text>
+            <div className="flex flex-col items-center justify-center p-2 py-1">
+              <img
+                className="pb-3 invert"
+                alt="No results"
+                src={'/assets/filters/empty.png'}
+                width={80}
+                height={80}
+              />
+              <div className="pb-[2px]">
+                <Text size={15} weight="semibold">
+                  No options found
+                </Text>
+              </div>
+              <div className="text-center">
+                <Text size={13}>
+                  We didn&apos;t find results that match your search
+                </Text>
+              </div>
             </div>
           )}
         </DropdownMenu.Content>

apps/website/src/components/table-issues/table-issues.tsx

@@ -145,22 +145,9 @@ export const TableIssues = () => {
                 ref={inputRef}
               />
             </div>
-            <FilterWithCheckboxes
-              data={authors}
-              label="Author"
-              noResultsText="No author found"
-            />
-            <FilterWithCheckboxes
-              data={epics}
-              label="Epics"
-              noResultsText="No epics found"
-            />
-            <FilterWithCheckboxes
-              data={labels}
-              label="Label"
-              noResultsText="No labels found"
-              noPadding
-            />
+            <FilterWithCheckboxes data={authors} label="Author" />
+            <FilterWithCheckboxes data={epics} label="Epics" />
+            <FilterWithCheckboxes data={labels} label="Label" noPadding />
           </div>
         </div>
       </div>