From 8129a3994bec20e33c92e0d64c24c7256c45b4be Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 15 Jul 2023 11:18:18 -0700
Subject: [PATCH] Add order toggle button component

---
 .../shared/components/order-toggle-button.tsx | 33 +++++++++++++++++++
 src/renderer/features/shared/index.ts         | 11 ++++---
 2 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 src/renderer/features/shared/components/order-toggle-button.tsx

diff --git a/src/renderer/features/shared/components/order-toggle-button.tsx b/src/renderer/features/shared/components/order-toggle-button.tsx
new file mode 100644
index 00000000..78cc562b
--- /dev/null
+++ b/src/renderer/features/shared/components/order-toggle-button.tsx
@@ -0,0 +1,33 @@
+import { ButtonProps } from '@mantine/core';
+import { RiSortAsc, RiSortDesc } from 'react-icons/ri';
+import { SortOrder } from '/@/renderer/api/types';
+import { Button, Tooltip } from '/@/renderer/components';
+
+interface OrderToggleButtonProps {
+    buttonProps?: Partial<ButtonProps>;
+    onToggle: () => void;
+    sortOrder: SortOrder;
+}
+
+export const OrderToggleButton = ({ sortOrder, onToggle, buttonProps }: OrderToggleButtonProps) => {
+    return (
+        <Tooltip label={sortOrder}>
+            <Button
+                compact
+                fw="600"
+                size="md"
+                variant="subtle"
+                onClick={onToggle}
+                {...buttonProps}
+            >
+                <>
+                    {sortOrder === SortOrder.ASC ? (
+                        <RiSortAsc size="1.3rem" />
+                    ) : (
+                        <RiSortDesc size="1.3rem" />
+                    )}
+                </>
+            </Button>
+        </Tooltip>
+    );
+};
diff --git a/src/renderer/features/shared/index.ts b/src/renderer/features/shared/index.ts
index 93f39eaa..85b712bd 100644
--- a/src/renderer/features/shared/index.ts
+++ b/src/renderer/features/shared/index.ts
@@ -1,11 +1,12 @@
 export * from './components/animated-page';
-export * from './queries/music-folders-query';
-export * from './components/play-button';
-export * from './utils';
+export * from './components/filter-bar';
 export * from './components/library-header';
 export * from './components/library-header-bar';
+export * from './components/order-toggle-button';
+export * from './components/play-button';
+export * from './components/resize-handle';
 export * from './mutations/create-favorite-mutation';
 export * from './mutations/delete-favorite-mutation';
 export * from './mutations/set-rating-mutation';
-export * from './components/filter-bar';
-export * from './components/resize-handle';
+export * from './queries/music-folders-query';
+export * from './utils';