diff --git a/web/src/components/list-filter-bar.tsx b/web/src/components/list-filter-bar.tsx index 9732e5d77..f671c987b 100644 --- a/web/src/components/list-filter-bar.tsx +++ b/web/src/components/list-filter-bar.tsx @@ -1,24 +1,57 @@ -import { Filter } from 'lucide-react'; -import { PropsWithChildren } from 'react'; -import { Button } from './ui/button'; +import { ChevronDown } from 'lucide-react'; +import React, { + ChangeEventHandler, + FunctionComponent, + PropsWithChildren, +} from 'react'; +import { Button, ButtonProps } from './ui/button'; import { SearchInput } from './ui/input'; interface IProps { title: string; showDialog?: () => void; + FilterPopover?: FunctionComponent; + searchString?: string; + onSearchChange?: ChangeEventHandler; + count?: number; } +const FilterButton = React.forwardRef< + HTMLButtonElement, + ButtonProps & { count?: number } +>(({ count = 0, ...props }, ref) => { + return ( + + ); +}); + export default function ListFilterBar({ title, children, showDialog, + FilterPopover, + searchString, + onSearchChange, + count, }: PropsWithChildren) { return (
{title}
- - + {FilterPopover ? ( + + + + ) : ( + + )} + + diff --git a/web/src/components/ui/pagination.tsx b/web/src/components/ui/pagination.tsx new file mode 100644 index 000000000..757ffaccc --- /dev/null +++ b/web/src/components/ui/pagination.tsx @@ -0,0 +1,117 @@ +import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'; +import * as React from 'react'; + +import { ButtonProps, buttonVariants } from '@/components/ui/button'; +import { cn } from '@/lib/utils'; + +const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => ( +