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}`
|
color?: ColorTokens | `#${string}`
|
||||||
}[]
|
}[]
|
||||||
label: string
|
label: string
|
||||||
noResultsText?: string
|
|
||||||
noPadding?: boolean
|
noPadding?: boolean
|
||||||
}
|
}
|
||||||
const FilterWithCheckboxes = (props: Props) => {
|
const FilterWithCheckboxes = (props: Props) => {
|
||||||
const { data, label, noResultsText, noPadding } = props
|
const { data, label, noPadding } = props
|
||||||
|
|
||||||
const [filterText, setFilterText] = useState('')
|
const [filterText, setFilterText] = useState('')
|
||||||
|
|
||||||
|
@ -91,8 +90,24 @@ const FilterWithCheckboxes = (props: Props) => {
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
{filteredData.length === 0 && (
|
{filteredData.length === 0 && (
|
||||||
<div className="p-2 py-1">
|
<div className="flex flex-col items-center justify-center p-2 py-1">
|
||||||
<Text size={13}>{noResultsText}</Text>
|
<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>
|
</div>
|
||||||
)}
|
)}
|
||||||
</DropdownMenu.Content>
|
</DropdownMenu.Content>
|
||||||
|
|
|
@ -145,22 +145,9 @@ export const TableIssues = () => {
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<FilterWithCheckboxes
|
<FilterWithCheckboxes data={authors} label="Author" />
|
||||||
data={authors}
|
<FilterWithCheckboxes data={epics} label="Epics" />
|
||||||
label="Author"
|
<FilterWithCheckboxes data={labels} label="Label" noPadding />
|
||||||
noResultsText="No author found"
|
|
||||||
/>
|
|
||||||
<FilterWithCheckboxes
|
|
||||||
data={epics}
|
|
||||||
label="Epics"
|
|
||||||
noResultsText="No epics found"
|
|
||||||
/>
|
|
||||||
<FilterWithCheckboxes
|
|
||||||
data={labels}
|
|
||||||
label="Label"
|
|
||||||
noResultsText="No labels found"
|
|
||||||
noPadding
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue