Add filter for description containing text

src/components/filters/AddFilter.tsx

@@ -1,5 +1,6 @@
 import { useRef, useState } from 'react'
 import DateFilter from './DateFilter'
+import DescFilter from './DescFilter'
 import LatLongFilter from './LatLongFilter'
 import { filterDispatchType, filterProps } from '@/pages/StatsDashboard'
 import { LucideCalendar, LucideGlobe, LucideMapPin, LucidePlus, LucideTags, LucideText } from 'lucide-react'
@@ -54,7 +55,7 @@ const possibleFilters: FilterInfo[] = [
   {
     name: 'Descripción',
     icon: LucideText,
-    component: DateFilter, // TODO: Change this to the actual component
+    component: DescFilter,
     description: 'Filtrar por palabras clave en la descripción',
   },
 ]

src/components/filters/DescFilter.tsx

@@ -0,0 +1,34 @@
+import { filterProps } from '@/pages/StatsDashboard'
+import BaseFilter from './BaseFilter'
+import { LucideCalendar, LucideTrash2 } from 'lucide-react'
+import { useState, useEffect } from 'react'
+
+const FilterDesc = ({ id, dispatch }: filterProps) => {
+  const [search, setSearch] = useState('')
+
+  useEffect(() => {
+    const lowercaseSearch = search.toLowerCase()
+    dispatch({
+      type: 'UPDATE_FILTER',
+      payload: {
+        id: id,
+        operation: (incident) => incident.description.toLowerCase().includes(lowercaseSearch),
+      },
+    })
+  }, [search])
+
+  const removeThisFilter = () => {
+    dispatch({ type: 'REMOVE_FILTER', payload: { id: id } })
+  }
+
+  return (
+    <BaseFilter icon={<LucideCalendar />} text={`La descripción contiene «${search}»`}>
+      <button onClick={removeThisFilter} className="absolute right-2 top-1 h-4 w-4 text-red-600" title="Eliminar Filtro">
+        <LucideTrash2 size={20} />
+      </button>
+      <input type="text" onChange={(e) => setSearch(e.target.value)} value={search} className="mr-6 rounded-md border border-gray-300 p-1" />
+    </BaseFilter>
+  )
+}
+
+export default FilterDesc