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="mt-4 rounded-lg border bg-accent/50">
<div className="flex gap-3 px-4 py-2"> <div className="flex gap-3 px-4 py-2">
<h2 className="text-lg font-semibold"> <h2 className="text-lg font-semibold">
How to {item.type ? "install" : "use"} How to {item.type == "misc" ? "use" : "install"}
</h2> </h2>
<Tooltips item={item} /> <Tooltips item={item} />
</div> </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 time and minimal system resource usage. You are also obliged to
adhere to updates provided by the package maintainer. adhere to updates provided by the package maintainer.
</> </>
) : item.type ? ( ) : item.type == "misc" ? (
<> <>
To create a new Proxmox VE {item.name}{" "} To use the {item.name} script, run the command below in the shell.
{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 create a new Proxmox VE {item.name}{" "}
{getDisplayValueFromType(item.type)}, run the command below in the
Proxmox VE Shell.
</> </>
)} )}
</p> </p>

7
frontend/src/app/scripts/_components/ScriptItems/Tooltips.tsx
View File

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