Enhance Tooltip component by adding CircleHelp icon and fix instructions in script component (#910)

* Enhance Tooltip component by adding CircleHelp icon and adjusting layout. Updated TooltipContent max width for better display.

* Refactor ScriptItem and InstallCommand components to improve conditional rendering based on item type. Updated text to clarify usage instructions for 'misc' type scripts.
This commit is contained in:
Bram Suurd
2024-12-19 00:16:54 -08:00
committed by GitHub
parent a9a640bb75
commit 6f96aebc27
3 changed files with 12 additions and 8 deletions

View File

@@ -6,6 +6,7 @@ import {
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Script } from "@/lib/types";
import { CircleHelp } from "lucide-react";
import React from "react";
interface TooltipProps {
@@ -18,9 +19,11 @@ const TooltipBadge: React.FC<TooltipProps> = ({ variant, label, content }) => (
<TooltipProvider>
<Tooltip delayDuration={100}>
<TooltipTrigger className="flex items-center">
<Badge variant={variant}>{label}</Badge>
<Badge variant={variant} className="flex items-center gap-1">
{label} <CircleHelp className="size-3" />
</Badge>
</TooltipTrigger>
<TooltipContent side="bottom" className="text-sm">
<TooltipContent side="bottom" className="text-sm max-w-64">
{content}
</TooltipContent>
</Tooltip>