Data table filter

1'use client'
2 
3import { useIsMobile } from '@/hooks/use-mobile'
4import type {
5  Column,
6  DataTableFilterActions,
7  FilterStrategy,
8  FiltersState,
9} from '../core/types'
10import type { Locale } from '../lib/i18n'
11import { ActiveFilters, ActiveFiltersMobileContainer } from './active-filters'
12import { FilterActions } from './filter-actions'
13import { FilterSelector } from './filter-selector'
14 
15interface DataTableFilterProps<TData> {
16  columns: Column<TData>[]
17  filters: FiltersState
18  actions: DataTableFilterActions
19  strategy: FilterStrategy
20  locale?: Locale
21}
22 
23export function DataTableFilter<TData>({
24  columns,
25  filters,
26  actions,
27  strategy,
28  locale = 'en',
29}: DataTableFilterProps<TData>) {
30  const isMobile = useIsMobile()
31  if (isMobile) {
32    return (
33      <div className="flex w-full items-start justify-between gap-2">
34        <div className="flex gap-1">
35          <FilterSelector
36            columns={columns}
37            filters={filters}
38            actions={actions}
39            strategy={strategy}
40            locale={locale}
41          />
42          <FilterActions
43            hasFilters={filters.length > 0}
44            actions={actions}
45            locale={locale}
46          />
47        </div>
48        <ActiveFiltersMobileContainer>
49          <ActiveFilters
50            columns={columns}
51            filters={filters}
52            actions={actions}
53            strategy={strategy}
54            locale={locale}
55          />
56        </ActiveFiltersMobileContainer>
57      </div>
58    )
59  }
60 
61  return (
62    <div className="flex w-full items-start justify-between gap-2">
63      <div className="flex md:flex-wrap gap-2 w-full flex-1">
64        <FilterSelector
65          columns={columns}
66          filters={filters}
67          actions={actions}
68          strategy={strategy}
69          locale={locale}
70        />
71        <ActiveFilters
72          columns={columns}
73          filters={filters}
74          actions={actions}
75          strategy={strategy}
76          locale={locale}
77        />
78      </div>
79      <FilterActions
80        hasFilters={filters.length > 0}
81        actions={actions}
82        locale={locale}
83      />
84    </div>
85  )
86}