feat(ui): add sorting icon component and table header cell styling EE-3626 (#7165)

* feat(ui): add sorting icons EE-3626

feat(ui): Add react component for sorting icons

feat(ui) make component usable in angular 

* feat(ui): update angular example EE-3626

app/react/components/datatables/TableHeaderSortIcons.tsx

@@ -0,0 +1,33 @@
+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>
+  );
+}