Function SortArrows

app/src/components/sorting.tsx:47–68

(props: { field: Fields })

};

export const SortArrows = <Fields extends SortableFields>(props: { field: Fields }) => {
  const { toggle, params } = useSortOrder<Fields>();

  const currentSort = params?.field === props.field ? params.order : undefined;

  return (
    <VStack spacing={0} h={6} cursor="pointer" onClick={() => toggle(props.field)} justify="center">
      <Icon
        as={BiSolidUpArrow}
        color={currentSort === "asc" ? "orange.400" : "gray.300"}
        boxSize={2}
        strokeWidth={2}
      />
      <Icon
        as={BiSolidDownArrow}
        color={currentSort === "desc" ? "orange.400" : "gray.300"}
        boxSize={2}
        strokeWidth={2}
      />
    </VStack>
  );
};

export const SortableHeader = <T extends string>(props: {
  title: string;