From 2ccf55f75f27543b8c4136f786a9d0c7c5866d60 Mon Sep 17 00:00:00 2001
From: Juan Di Toro <ditorojuanf@gmail.com>
Date: Fri, 22 Mar 2024 14:14:45 +0100
Subject: [PATCH] fix: closes #9

---
 app/components/general-layout.tsx | 41 ++++++++++++++++++++++++-------
 app/components/ui/tooltip.tsx     | 28 +++++++++++++++++++++
 package.json                      |  2 ++
 3 files changed, 62 insertions(+), 9 deletions(-)
 create mode 100644 app/components/ui/tooltip.tsx

diff --git a/app/components/general-layout.tsx b/app/components/general-layout.tsx
index f4d79c3..b861d04 100644
--- a/app/components/general-layout.tsx
+++ b/app/components/general-layout.tsx
@@ -25,17 +25,28 @@ import {
   PageIcon,
   ThemeIcon,
 } from "./icons";
-import { DropdownMenu, DropdownMenuTrigger,  DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem } from "./ui/dropdown-menu";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+} from "./ui/dropdown-menu";
 import { Avatar } from "@radix-ui/react-avatar";
 import { cn } from "~/utils";
 import { useGetIdentity, useLogout } from "@refinedev/core";
 import type { Identity } from "~/data/auth-provider";
-
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider,
+} from "./ui/tooltip";
 
 export const GeneralLayout = ({ children }: React.PropsWithChildren) => {
   const location = useLocation();
   const { data: identity } = useGetIdentity<Identity>();
-  const{ mutate: logout } = useLogout()
+  const { mutate: logout } = useLogout();
   return (
     <div className="h-full flex flex-row">
       <header className="p-10 pr-0 flex flex-col w-[240px] h-full scroll-m-0 overflow-hidden">
@@ -246,6 +257,7 @@ const UploadFileItem = ({
   file: UppyFile;
   onRemove: (id: string) => void;
 }) => {
+  const sizeInMb = bytestoMegabytes(file.size).toFixed(2);
   return (
     <div className="flex flex-col w-full py-4 px-2 bg-primary-dark">
       <div className="flex text-primary-1 items-center justify-between">
@@ -257,12 +269,23 @@ const UploadFileItem = ({
               <PageIcon className="w-4 h-4" />
             )}
           </div>
-          <p className="w-full flex justify-between items-center">
-            <span className="truncate text-ellipsis max-w-[30ch]">
-              {file.name}
-            </span>{" "}
-            <span>({bytestoMegabytes(file.size).toFixed(2)} MB)</span>
-          </p>
+          <TooltipProvider>
+            <Tooltip delayDuration={500}>
+              <TooltipTrigger>
+                <p className="w-full flex justify-between items-center">
+                  <span className="truncate text-ellipsis max-w-[20ch]">
+                    {file.name}
+                  </span>{" "}
+                  <span>({sizeInMb}MB)</span>
+                </p>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>
+                  {file.name} ({sizeInMb}MB)
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </div>
         <Button
           size={"icon"}
diff --git a/app/components/ui/tooltip.tsx b/app/components/ui/tooltip.tsx
new file mode 100644
index 0000000..13aaa04
--- /dev/null
+++ b/app/components/ui/tooltip.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "~/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/package.json b/package.json
index 8acf6d0..45a71ac 100644
--- a/package.json
+++ b/package.json
@@ -23,10 +23,12 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@refinedev/cli": "^2.16.1",
     "@refinedev/core": "https://gitpkg.now.sh/LumeWeb/refine/packages/core?remix",
     "@refinedev/devtools-internal": "https://gitpkg.now.sh/LumeWeb/refine/packages/devtools-internal?remix",