♻️ refactor: Add tooltip to display project details in ModelControlPanel

DigitalProductInnovationAndDevelopment · Aug 14, 2024 · 95f91f0 · 95f91f0
1 parent 6c0c7f1
commit 95f91f0
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/src/components/ui/modelControlPanel.tsx b/src/components/ui/modelControlPanel.tsx
@@ -20,6 +20,7 @@ import {
 } from "~/components/ui/dropdown-menu";
 import { ChevronDown } from "lucide-react";
 import { useEffect } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
 
 export interface ModelControlPanelProps {
   stages: Stage[];
@@ -82,13 +83,24 @@ const ModelControlPanel = React.forwardRef<
       {session ? (
         <div className="flex w-full">
           {allProjects?.length == 0 ? (
-            <div className="overflow-hidden">
+            <div className="overflow-hidden text-center font-semibold">
               This user has no projects assigned.
             </div>
           ) : (
             <div className="flex w-full flex-col items-center text-sm">
-              <div className="m-2 flex-shrink-0 overflow-hidden font-bold">
-                Current project:
+              <div className="m-2 flex-shrink-0 overflow-hidden font-bold hover:underline">
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Link href={`/projects/${currentProject?.id}`}>
+                      <Button variant={"outline"}>
+                        {currentProject?.name}
+                      </Button>
+                    </Link>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    Go to project details
+                  </TooltipContent>
+                </Tooltip>
               </div>
               <div className="mb-2">
                 <DropdownMenu>