diff --git a/src/components/Table/SortIcon.tsx b/src/components/Table/SortIcon.tsx new file mode 100644 index 0000000..edf763a --- /dev/null +++ b/src/components/Table/SortIcon.tsx @@ -0,0 +1,16 @@ +export function SortIcon() { + return ( + + + + ); +} diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 218fb7c..cb5fc8b 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -3,6 +3,7 @@ import { ArrowDownUp, Search } from "lucide-react"; import { Fragment, ReactElement, ReactNode, useEffect, useState } from "react"; import { classnames } from "../utils/classnames"; import { attributes } from "../utils/attributes"; +import { SortIcon } from "./SortIcon"; export type TabSortState = "asc" | "desc" | null; @@ -95,7 +96,7 @@ export function Table({ >
{name} - {sort && } + {sort && }
); diff --git a/src/components/Table/table.css b/src/components/Table/table.css index 3948b9c..1b12d77 100644 --- a/src/components/Table/table.css +++ b/src/components/Table/table.css @@ -1,5 +1,4 @@ .table { - padding: 2rem; border-radius: var(--codex-border-radius); overflow-x: auto; overflow-y: hidden; @@ -36,7 +35,6 @@ svg { position: relative; - top: -2px; cursor: pointer; } @@ -45,13 +43,11 @@ transition: opacity 0.35s; } - th[aria-sort="descending"] path:nth-child(1), - th[aria-sort="descending"] path:nth-child(2) { + th[aria-sort="descending"] path { opacity: 1; } - th[aria-sort="ascending"] path:nth-child(3), - th[aria-sort="ascending"] path:nth-child(4) { + th[aria-sort="ascending"] path { opacity: 1; }