portainer/app/react/components/datatables/TableHeaderSortIcons.tsx

34 lines
843 B
TypeScript
Raw Normal View History

import clsx from 'clsx';
import SortDownIcon from './sort-arrow-down.svg?c';
import SortUpIcon from './sort-arrow-up.svg?c';
import styles from './TableHeaderSortIcons.module.css';
interface Props {
sorted: boolean;
descending: boolean;
}
export function TableHeaderSortIcons({ sorted, descending }: Props) {
return (
<div className="flex flex-row no-wrap w-min-max">
<SortDownIcon
className={clsx(
'space-left',
sorted && !descending && styles.activeSortIcon,
styles.sortIcon
)}
aria-hidden="true"
/>
<SortUpIcon
className={clsx(
'-ml-1', // shift closer to SortDownIcon to match the mockup
sorted && descending && styles.activeSortIcon,
styles.sortIcon
)}
aria-hidden="true"
/>
</div>
);
}