unifies info tooltips in single component

client/src/components/ui/dialog.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { Cross2Icon } from "@radix-ui/react-icons";
+import { XIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
@@ -45,10 +45,10 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <Cross2Icon className="h-4 w-4" />
+      <DialogClose className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <XIcon className="h-5 w-5 text-foreground hover:text-muted-foreground" />
         <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
+      </DialogClose>
     </DialogPrimitive.Content>
   </DialogPortal>
 ));
@@ -109,13 +109,22 @@ const DialogDescription = React.forwardRef<
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
+const DialogContentContainer = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("space-y-1.5 text-foreground", className)} {...props} />
+);
+DialogContentContainer.displayName = "DialogContentContainer";
+
 export {
   Dialog,
   DialogPortal,
   DialogOverlay,
   DialogTrigger,
   DialogClose,
   DialogContent,
+  DialogContentContainer,
   DialogHeader,
   DialogFooter,
   DialogTitle,

client/src/components/ui/info-button.tsx

@@ -0,0 +1,37 @@
+import { PropsWithChildren } from "react";
+import * as React from "react";
+
+import { InfoIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogContentContainer,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+export default function InfoButton({
+  title,
+  children,
+}: PropsWithChildren<{
+  title?: string;
+}>) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="ghost" className="h-5 w-5 p-0 hover:bg-transparent">
+          <InfoIcon className="h-7 w-7 text-foreground hover:text-muted-foreground" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          {title && <DialogTitle>{title}</DialogTitle>}
+          <DialogContentContainer>{children}</DialogContentContainer>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+}

client/src/components/ui/label.tsx

@@ -4,19 +4,10 @@ import * as React from "react";
 
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva, type VariantProps } from "class-variance-authority";
-import { InfoIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
+import InfoButton from "@/components/ui/info-button";
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
@@ -40,22 +31,7 @@ const Label = React.forwardRef<
           className={cn(labelVariants(), className)}
           {...props}
         />
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button
-              variant="ghost"
-              className="group h-5 w-5 p-0 hover:bg-transparent"
-            >
-              <InfoIcon className="h-7 w-7 text-foreground hover:text-muted-foreground" />
-            </Button>
-          </DialogTrigger>
-          <DialogContent className="sm:max-w-md">
-            <DialogHeader>
-              <DialogTitle>{tooltip.title}</DialogTitle>
-              <DialogDescription>{tooltip.content}</DialogDescription>
-            </DialogHeader>
-          </DialogContent>
-        </Dialog>
+        <InfoButton title={tooltip.title}>{tooltip.content}</InfoButton>
       </div>
     );
   }

client/src/containers/projects/table/toolbar/index.tsx

@@ -1,13 +1,41 @@
-import InfoDownloadProjectsTable from "@/containers/projects/table/toolbar/info-download";
 import SearchProjectsTable from "@/containers/projects/table/toolbar/search";
 import TabsProjectsTable from "@/containers/projects/table/toolbar/table-selector";
 
+import InfoButton from "@/components/ui/info-button";
+
 export default function ToolbarProjectsTable() {
   return (
     <div className="flex items-center justify-between px-5 py-3">
       <SearchProjectsTable />
       <TabsProjectsTable />
-      <InfoDownloadProjectsTable />
+      <div className="flex flex-1 items-center justify-end space-x-2">
+        <InfoButton>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+            vehicula, nunc nec vehicula fermentum, nunc libero bibendum purus,
+            nec tincidunt libero nunc nec libero. Integer nec libero nec libero
+            tincidunt tincidunt. Sed vehicula, nunc nec vehicula fermentum, nunc
+            libero bibendum purus, nec tincidunt libero nunc nec libero. Integer
+            nec libero nec libero tincidunt tincidunt.
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+            vehicula, nunc nec vehicula fermentum, nunc libero bibendum purus,
+            nec tincidunt libero nunc nec libero. Integer nec libero nec libero
+            tincidunt tincidunt. Sed vehicula, nunc nec vehicula fermentum, nunc
+            libero bibendum purus, nec tincidunt libero nunc nec libero. Integer
+            nec libero nec libero tincidunt tincidunt.
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+            vehicula, nunc nec vehicula fermentum, nunc libero bibendum purus,
+            nec tincidunt libero nunc nec libero. Integer nec libero nec libero
+            tincidunt tincidunt. Sed vehicula, nunc nec vehicula fermentum, nunc
+            libero bibendum purus, nec tincidunt libero nunc nec libero. Integer
+            nec libero nec libero tincidunt tincidunt.
+          </p>
+        </InfoButton>
+      </div>
     </div>
   );
 }