Fix table sort icon

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@codex-storage/marketplace-ui-components",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@codex-storage/marketplace-ui-components",
-      "version": "0.0.38",
+      "version": "0.0.39",
       "license": "MIT",
       "dependencies": {
         "lucide-react": "^0.453.0"

package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/codex-storage/codex-marketplace-ui-components"
   },
-  "version": "0.0.38",
+  "version": "0.0.39",
   "type": "module",
   "scripts": {
     "prepack": "npm run build",

src/assets/icons/asc.svg

@@ -0,0 +1,19 @@
+<svg
+  width="20"
+  height="10"
+  viewBox="0 0 20 10"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clipPath="url(#clip0_326_785)">
+    <path
+      d="M14.1666 7.91667L9.99992 3.75L5.83325 7.91667H14.1666ZM14.1666 12.0833L9.99992 16.25L5.83325 12.0833H14.1666Z"
+      fill="#969696"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_326_785">
+      <rect width="20" height="10" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

src/assets/icons/desc.svg

@@ -0,0 +1,19 @@
+<svg
+  width="20"
+  height="10"
+  viewBox="0 0 20 10"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clipPath="url(#clip0_326_787)">
+    <path
+      d="M14.1666 -2.08333L9.99992 -6.25L5.83325 -2.08333H14.1666ZM14.1666 2.08333L9.99992 6.25L5.83325 2.08333H14.1666Z"
+      fill="#969696"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_326_787">
+      <rect width="20" height="10" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

src/components/Table/SortIcon.css

@@ -1,5 +0,0 @@
-.sort-icon {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}

src/components/Table/SortIcon.tsx

@@ -1,46 +0,0 @@
-import "./SortIcon.css";
-
-export function SortIcon() {
-  return (
-    <span className="sort-icon">
-      <svg
-        width="20"
-        height="10"
-        viewBox="0 0 20 10"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g clipPath="url(#clip0_326_785)">
-          <path
-            d="M14.1666 7.91667L9.99992 3.75L5.83325 7.91667H14.1666ZM14.1666 12.0833L9.99992 16.25L5.83325 12.0833H14.1666Z"
-            fill="#969696"
-          />
-        </g>
-        <defs>
-          <clipPath id="clip0_326_785">
-            <rect width="20" height="10" fill="white" />
-          </clipPath>
-        </defs>
-      </svg>
-      <svg
-        width="20"
-        height="10"
-        viewBox="0 0 20 10"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g clipPath="url(#clip0_326_787)">
-          <path
-            d="M14.1666 -2.08333L9.99992 -6.25L5.83325 -2.08333H14.1666ZM14.1666 2.08333L9.99992 6.25L5.83325 2.08333H14.1666Z"
-            fill="#969696"
-          />
-        </g>
-        <defs>
-          <clipPath id="clip0_326_787">
-            <rect width="20" height="10" fill="white" />
-          </clipPath>
-        </defs>
-      </svg>
-    </span>
-  );
-}

src/components/Table/Table.tsx

@@ -1,14 +1,9 @@
 import "./table.css";
-import {
+import { Fragment, ReactElement, ReactNode, useEffect, useState } from "react";
-  ComponentType,
-  Fragment,
-  ReactElement,
-  ReactNode,
-  useEffect,
-  useState,
-} from "react";
 import { classnames } from "../utils/classnames";
 import { attributes } from "../utils/attributes";
+import AscIcon from "../../assets/icons/asc.svg?react";
+import DescIcon from "../../assets/icons/desc.svg?react";
 
 export type TabSortState = "asc" | "desc" | null;
 
@@ -29,8 +24,6 @@ type Props = {
   className?: string;
 
   rows: ReactElement<RowProps, typeof Row>[];
-
-  SortIcon: ComponentType;
 };
 
 const nextState = (state: "asc" | "desc" | null) =>
@@ -39,7 +32,6 @@ const nextState = (state: "asc" | "desc" | null) =>
 export function Table({
   headers,
   rows,
-  SortIcon,
   defaultSortIndex = -1,
   className = "",
 }: Props) {
@@ -92,7 +84,11 @@ export function Table({
                       ? {
                           role: "button",
                           "aria-sort":
-                            state === "asc" ? "ascending" : "descending",
+                            state === "asc"
+                              ? "ascending"
+                              : state == null
+                                ? ""
+                                : "descending",
                         }
                       : {}
                   )}
@@ -104,7 +100,12 @@ export function Table({
                 >
                   <div>
                     <span>{name}</span>
-                    {sort && <SortIcon />}
+                    {sort && (
+                      <span className="sort-icon">
+                        <AscIcon />
+                        <DescIcon />
+                      </span>
+                    )}
                   </div>
                 </th>
               );

src/components/Table/table.css

@@ -22,6 +22,12 @@
           box-sizing: border-box;
           background-color: #232323;
 
+          .sort-icon {
+            display: flex;
+            flex-direction: column;
+            gap: 0;
+          }
+
           &[role="button"] {
             cursor: pointer;
           }

stories/Table.stories.tsx

@@ -70,7 +70,7 @@ export const Sort: Story = {
         ]}
       ></Row>,
     ],
-    headers: [["id"], ["title"], ["other", () => {}], ["actions"]],
+    headers: [["id"], ["title", () => {}], ["other", () => {}], ["actions"]],
     defaultSortIndex: 2,
   },
 };