From 1eeebaca00a3e53b784ab659de32e2c5286f321c Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 26 Jun 2023 21:23:43 +0800
Subject: [PATCH] Add tooltip for sort

---
 .../Organization/AuditLogs/AuditLogs.tsx      | 47 ++++++++++++++-----
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx b/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
index b6b8dbfed92..17e3e632373 100644
--- a/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
+++ b/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
@@ -1,6 +1,7 @@
 import dayjs from 'dayjs'
 import Image from 'next/image'
 import { useState } from 'react'
+import * as Tooltip from '@radix-ui/react-tooltip'
 
 import { useParams } from 'common'
 import Table from 'components/to-be-cleaned/Table'
@@ -127,18 +128,40 @@ const AuditLogs = () => {
                     <Table.th key="date" className="py-2">
                       <div className="flex items-center space-x-2">
                         <p>Date</p>
-                        <Button
-                          type="text"
-                          className="px-1"
-                          icon={
-                            dateSortDesc ? (
-                              <IconArrowDown strokeWidth={1.5} size={14} />
-                            ) : (
-                              <IconArrowUp strokeWidth={1.5} size={14} />
-                            )
-                          }
-                          onClick={() => setDateSortDesc(!dateSortDesc)}
-                        />
+
+                        <Tooltip.Root delayDuration={0}>
+                          <Tooltip.Trigger>
+                            <Button
+                              type="text"
+                              className="px-1"
+                              icon={
+                                dateSortDesc ? (
+                                  <IconArrowDown strokeWidth={1.5} size={14} />
+                                ) : (
+                                  <IconArrowUp strokeWidth={1.5} size={14} />
+                                )
+                              }
+                              onClick={() => setDateSortDesc(!dateSortDesc)}
+                            />
+                          </Tooltip.Trigger>
+                          <Tooltip.Portal>
+                            <Tooltip.Portal>
+                              <Tooltip.Content side="right">
+                                <Tooltip.Arrow className="radix-tooltip-arrow" />
+                                <div
+                                  className={[
+                                    'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                                    'border border-scale-200',
+                                  ].join(' ')}
+                                >
+                                  <span className="text-xs text-scale-1200">
+                                    {dateSortDesc ? 'Sort latest first' : 'Sort earliest first'}
+                                  </span>
+                                </div>
+                              </Tooltip.Content>
+                            </Tooltip.Portal>
+                          </Tooltip.Portal>
+                        </Tooltip.Root>
                       </div>
                     </Table.th>,
                     <Table.th key="actions" className="py-2"></Table.th>,