Spaces:
Runtime error
Runtime error
File size: 2,314 Bytes
db5855f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
import './ContentSectionHeader.scss';
import { useContext } from 'react';
import { openFiltersPanel } from '@/components/FiltersPanel/filters-panel-handlers';
import { Button } from '@/components/shared/Button/Button';
import { Dropdown } from '@/components/shared/Dropdown/Dropdown';
import { Search } from '@/components/shared/Search/Search';
import { SORT_OPTIONS, SortValues } from '@/shared/notebooks.service';
import { NotebooksContext } from '@/shared/notebooks-context';
const sparkClassNames = {
fontTitleXs: 'spark-font-200',
};
type ContentSectionHeaderProps = {
totalCount: number;
filteredCount: number;
};
export const ContentSectionHeader = ({ totalCount, filteredCount }: ContentSectionHeaderProps): JSX.Element => {
const { searchValue, setSearchValue, resetFilters, sort, setSort } = useContext(NotebooksContext);
const isFiltered = filteredCount !== totalCount;
return (
<div className="content-section-header">
<div className="title-container">
<h1 className={`${sparkClassNames.fontTitleXs} title`}>Notebooks</h1>
<span className={`${sparkClassNames.fontTitleXs} counter`}>
{isFiltered ? `${filteredCount} of ${totalCount}` : totalCount}
</span>
{isFiltered && (
<Button
text="Reset Filters"
variant="secondary"
size="s"
className="reset-filters-button"
onClick={resetFilters}
></Button>
)}
</div>
<div className="content-section-header-actions">
<Button
text={isFiltered ? 'Edit Filters' : 'Add Filters'}
variant="secondary"
size="m"
className="lg-hidden edit-filters-button"
onClick={openFiltersPanel}
></Button>
<Search
placeholder="Filter notebooks by name"
className="notebooks-search"
search={setSearchValue}
value={searchValue}
></Search>
<Dropdown
className="notebooks-sort"
options={Object.values(SORT_OPTIONS)}
selectedOption={sort}
selectedPrefix="Sort"
onSelect={(option) => setSort(option as SortValues)}
></Dropdown>
</div>
</div>
);
};
|