From 614574a44d2c6baabefd5cebc49f1e0307ba09d0 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Wed, 29 Nov 2023 20:12:02 +0800
Subject: [PATCH] Added a label to the SortMenu component to make it more
 explicit (#19171)

fixes ADM-21
---
 .../src/global/SortMenu.tsx                   | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/apps/admin-x-design-system/src/global/SortMenu.tsx b/apps/admin-x-design-system/src/global/SortMenu.tsx
index cbaa218636..c0bb216a11 100644
--- a/apps/admin-x-design-system/src/global/SortMenu.tsx
+++ b/apps/admin-x-design-system/src/global/SortMenu.tsx
@@ -65,18 +65,21 @@ const SortMenu: React.FC<SortMenuProps> = ({
 
     return (
         <Popover position={position} trigger={trigger}>
-            <div className="flex min-w-[160px] flex-col justify-stretch py-1" role="none">
-                {localItems.map(item => (
-                    <button key={item.id} className="group relative mx-1 flex grow cursor-pointer items-center rounded-[2.5px] px-8 py-1.5 pr-12 text-left text-sm hover:bg-grey-100 dark:hover:bg-grey-800" type="button" onClick={() => {
-                        handleSortChange(item.id);
-                    }}>
-                        {item.selected ? <Icon className='absolute left-2' name='check' size='xs' /> : null}
-                        {item.label}
-                        {item.selected ? <button className='absolute right-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full hover:bg-grey-300' title={`${localDirection === 'asc' ? 'Ascending' : 'Descending'}`} type='button' onClick={handleSortDirection}>
-                            {localDirection === 'asc' ? <Icon name='arrow-up' size='xs' /> : <Icon name='arrow-down' size='xs' />}
-                        </button> : null}
-                    </button>
-                ))}
+            <div className='flex flex-col'>
+                <div className='cursor-default select-none border-b border-b-grey-200 p-2 pl-3 text-sm font-semibold'>Sort by</div>
+                <div className="flex min-w-[160px] flex-col justify-stretch py-1" role="none">
+                    {localItems.map(item => (
+                        <button key={item.id} className="group relative mx-1 flex grow cursor-pointer items-center rounded-[2.5px] px-8 py-1.5 pr-12 text-left text-sm hover:bg-grey-100 dark:hover:bg-grey-800" type="button" onClick={() => {
+                            handleSortChange(item.id);
+                        }}>
+                            {item.selected ? <Icon className='absolute left-2' name='check' size='xs' /> : null}
+                            {item.label}
+                            {item.selected ? <button className='absolute right-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full hover:bg-grey-300' title={`${localDirection === 'asc' ? 'Ascending' : 'Descending'}`} type='button' onClick={handleSortDirection}>
+                                {localDirection === 'asc' ? <Icon name='arrow-up' size='xs' /> : <Icon name='arrow-down' size='xs' />}
+                            </button> : null}
+                        </button>
+                    ))}
+                </div>
             </div>
         </Popover>
     );