feat: add empty state to filters
This commit is contained in:
parent
c6488be581
commit
dc138f8715
Binary file not shown.
After Width: | Height: | Size: 24 KiB |
|
@ -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't find results that match your search
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DropdownMenu.Content>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue