diff --git a/src/components/filters/AddFilter.tsx b/src/components/filters/AddFilter.tsx
index e413e50..cb614f0 100644
--- a/src/components/filters/AddFilter.tsx
+++ b/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',
},
]
diff --git a/src/components/filters/DescFilter.tsx b/src/components/filters/DescFilter.tsx
new file mode 100644
index 0000000..77d633c
--- /dev/null
+++ b/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 (
+ } text={`La descripción contiene «${search}»`}>
+
+ setSearch(e.target.value)} value={search} className="mr-6 rounded-md border border-gray-300 p-1" />
+
+ )
+}
+
+export default FilterDesc