From fc488a54fcd9cb5df2b100a7d6e7b67f52d83a33 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Fri, 5 Jul 2024 11:17:07 +0100
Subject: [PATCH] Optional table header tooltip

---
 apps/webapp/app/components/primitives/Table.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index 0a618ec14..5f4f0d7e5 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -3,6 +3,7 @@ import { Link } from "@remix-run/react";
 import { ReactNode, forwardRef, useState } from "react";
 import { cn } from "~/utils/cn";
 import { Popover, PopoverContent, PopoverVerticalEllipseTrigger } from "./Popover";
+import { InfoIconTooltip } from "./Tooltip";
 
 type TableProps = {
   containerClassName?: string;
@@ -87,10 +88,11 @@ type TableCellBasicProps = {
 
 type TableHeaderCellProps = TableCellBasicProps & {
   hiddenLabel?: boolean;
+  tooltip?: ReactNode;
 };
 
 export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(
-  ({ className, alignment = "left", children, colSpan, hiddenLabel = false }, ref) => {
+  ({ className, alignment = "left", children, colSpan, hiddenLabel = false, tooltip }, ref) => {
     let alignmentClassName = "text-left";
     switch (alignment) {
       case "center":
@@ -112,7 +114,16 @@ export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellP
         )}
         colSpan={colSpan}
       >
-        {hiddenLabel ? <span className="sr-only">{children}</span> : children}
+        {hiddenLabel ? (
+          <span className="sr-only">{children}</span>
+        ) : tooltip ? (
+          <div className="flex items-center gap-1">
+            {children}
+            <InfoIconTooltip content={tooltip} contentClassName="normal-case tracking-normal" />
+          </div>
+        ) : (
+          children
+        )}
       </th>
     );
   }