feat: add empty state to filters

This commit is contained in:
marcelines 2023-06-06 18:08:06 +01:00
parent c6488be581
commit dc138f8715
No known key found for this signature in database
GPG Key ID: 56B1E53E2A3F43C7
3 changed files with 22 additions and 20 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

View File

@ -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&apos;t find results that match your search
</Text>
</div>
</div>
)}
</DropdownMenu.Content>

View File

@ -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>