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

Use formattedBadge in ScriptAccordion and CommandMenu for consistent badge rendering across script types

Browse Source
This commit is contained in:
Bram Suurd 2024-11-06 19:15:51 +01:00
parent c700d04422
commit 440d3b6aef
2 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/app/scripts/_components/ScriptAccordion.tsx
View File

@ -13,6 +13,7 @@ import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useState } from "react"; import { useState } from "react";
import { Badge } from "../../../components/ui/badge"; import { Badge } from "../../../components/ui/badge";
import { formattedBadge } from "@/components/CommandMenu";
export default function ScriptAccordion({ export default function ScriptAccordion({
items, items,
@ -122,19 +123,7 @@ export default function ScriptAccordion({
{script.name} {script.name}
</span> </span>
</div> </div>
<Badge {formattedBadge(script.type)}
className={cn(
"ml-auto w-[37.69px] justify-center text-center",
{
"text-primary/75": script.type === "vm",
"text-yellow-500/75": script.type === "ct",
"border-none": script.type === "misc",
hidden: !["VM", "LXC", ""].includes(script.type),
},
)}
>
{script.type}
</Badge>
</Link> </Link>
</div> </div>
))} ))}

30
frontend/src/components/CommandMenu.tsx
View File

@ -7,13 +7,27 @@ import {
CommandList, CommandList,
} from "@/components/ui/command"; } from "@/components/ui/command";
import { fetchCategories } from "@/lib/pocketbase"; import { fetchCategories } from "@/lib/pocketbase";
import { Category } from "@/lib/types"; import { Category, Script } from "@/lib/types";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import Image from "next/image"; import Image from "next/image";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import React from "react"; import React from "react";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { DialogTitle } from "./ui/dialog"; import { DialogTitle } from "./ui/dialog";
import { Badge } from "./ui/badge";
export const formattedBadge = (type: string) => {
switch (type) {
case "vm":
return <Badge className="text-blue-500/75 border-blue-500/75">VM</Badge>;
case "ct":
return (
<Badge className="text-yellow-500/75 border-yellow-500/75">LXC</Badge>
);
case "misc":
return <Badge className="text-red-500/75 border-red-500/75">MISC</Badge>;
}
};
export default function CommandMenu() { export default function CommandMenu() {
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
@ -55,7 +69,7 @@ export default function CommandMenu() {
)} )}
onClick={() => { onClick={() => {
fetchSortedCategories(); fetchSortedCategories();
setOpen(true) setOpen(true);
}} }}
> >
<span className="inline-flex">Search scripts...</span> <span className="inline-flex">Search scripts...</span>
@ -64,10 +78,12 @@ export default function CommandMenu() {
</kbd> </kbd>
</Button> </Button>
<CommandDialog open={open} onOpenChange={setOpen}> <CommandDialog open={open} onOpenChange={setOpen}>
<DialogTitle className="sr-only">Search scripts</DialogTitle> <DialogTitle className="sr-only">Search scripts</DialogTitle>
<CommandInput placeholder="search for a script..." /> <CommandInput placeholder="Search for a script..." />
<CommandList> <CommandList>
<CommandEmpty>{isLoading ? "Loading..." : "No scripts found."}</CommandEmpty> <CommandEmpty>
{isLoading ? "Loading..." : "No scripts found."}
</CommandEmpty>
{links.map((category) => ( {links.map((category) => (
<CommandGroup <CommandGroup
key={"category:" + category.name} key={"category:" + category.name}
@ -96,9 +112,7 @@ export default function CommandMenu() {
className="h-5 w-5" className="h-5 w-5"
/> />
<span>{script.name}</span> <span>{script.name}</span>
<span className="text-sm text-muted-foreground"> <span className="">{formattedBadge(script.type)}</span>
{script.type}
</span>
</div> </div>
</CommandItem> </CommandItem>
))} ))}