martin/ProxmoxVE
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE synced 2025-02-10 17:59:17 +00:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/scripts/_components/ScriptItem.tsx
View File

@ -81,7 +81,7 @@ function ScriptItem({
<div className="mt-4 rounded-lg border bg-accent/50">
<div className="flex gap-3 px-4 py-2">
<h2 className="text-lg font-semibold">
How to {item.type ? "install" : "use"}
How to {item.type == "misc" ? "use" : "install"}
</h2>
<Tooltips item={item} />
</div>

11
frontend/src/app/scripts/_components/ScriptItems/InstallCommand.tsx
View File

@ -28,15 +28,16 @@ export default function InstallCommand({ item }: { item: Script }) {
time and minimal system resource usage. You are also obliged to
adhere to updates provided by the package maintainer.
</>
) : item.type ? (
) : item.type == "misc" ? (
<>
To create a new Proxmox VE {item.name}{" "}
{getDisplayValueFromType(item.type)}, run the command below in the
Proxmox VE Shell.
To use the {item.name} script, run the command below in the shell.
</>
) : (
<>
To use the {item.name} script, run the command below in the shell.
{" "}
To create a new Proxmox VE {item.name}{" "}
{getDisplayValueFromType(item.type)}, run the command below in the
Proxmox VE Shell.
</>
)}
</p>

7
frontend/src/app/scripts/_components/ScriptItems/Tooltips.tsx
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>