community-scripts/Proxmox
2
0
Fork 0
mirror of https://github.com/community-scripts/Proxmox.git synced 2026-02-05 14:03:17 -06:00
Code Issues 1 Packages Projects Releases Wiki Activity

Add fallback logo handling for scripts in ScriptBrowser, ScriptItem, and CommandMenu components

Browse Source
This commit is contained in:
Bram Suurd 2024-11-02 10:38:48 +01:00
parent bf429b7d8b
commit 217a734f0e
3 changed files with 64 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/app/scripts/_components/ScriptBrowser.tsx
View File

@ -115,59 +115,63 @@ const ScriptBrowser = ({
}
className="pt-0"
>
{category.expand.items
.slice()
.sort((a, b) => a.title.localeCompare(b.title))
.map((script, index) => (
<div key={index}>
<Link
href={{
pathname: "/scripts",
query: { id: script.title },
}}
prefetch={false}
className={`flex cursor-pointer items-center justify-between gap-1 px-1 py-1 text-muted-foreground hover:rounded-lg hover:bg-accent/60 hover:dark:bg-accent/20 ${
selectedScript === script.title
? "rounded-lg bg-accent font-semibold dark:bg-accent/30 dark:text-white"
: ""
}`}
onClick={() => handleSelected(script.title)}
ref={(el) => {
linkRefs.current[script.title] = el;
}}
>
<Image
src={script.logo}
height={16}
width={16}
unoptimized
alt={script.title}
className="mr-1 w-4 h-4 rounded-full"
/>
<span className="flex items-center gap-2">
{script.title}
{script.isMostViewed && (
<Star className="h-3 w-3 text-yellow-500"></Star>
)}
</span>
<Badge
className={classNames(
"ml-auto w-[37.69px] justify-center text-center",
{
"text-primary/75": script.item_type === "VM",
"text-yellow-500/75": script.item_type === "LXC",
"border-none": script.item_type === "",
hidden: !["VM", "LXC", ""].includes(
script.item_type,
),
},
)}
{category.expand.items
.slice()
.sort((a, b) => a.title.localeCompare(b.title))
.map((script, index) => (
<div key={index}>
<Link
href={{
pathname: "/scripts",
query: { id: script.title },
}}
prefetch={false}
className={`flex cursor-pointer items-center justify-between gap-1 px-1 py-1 text-muted-foreground hover:rounded-lg hover:bg-accent/60 hover:dark:bg-accent/20 ${
selectedScript === script.title
? "rounded-lg bg-accent font-semibold dark:bg-accent/30 dark:text-white"
: ""
}`}
onClick={() => handleSelected(script.title)}
ref={(el) => {
linkRefs.current[script.title] = el;
}}
>
{script.item_type}
</Badge>
</Link>
</div>
))}
<Image
src={script.logo}
height={16}
width={16}
unoptimized
onError={(e) =>
((e.currentTarget as HTMLImageElement).src =
"/logo.png")
}
alt={script.title}
className="mr-1 w-4 h-4 rounded-full"
/>
<span className="flex items-center gap-2">
{script.title}
{script.isMostViewed && (
<Star className="h-3 w-3 text-yellow-500"></Star>
)}
</span>
<Badge
className={classNames(
"ml-auto w-[37.69px] justify-center text-center",
{
"text-primary/75": script.item_type === "VM",
"text-yellow-500/75": script.item_type === "LXC",
"border-none": script.item_type === "",
hidden: !["VM", "LXC", ""].includes(
script.item_type,
),
},
)}
>
{script.item_type}
</Badge>
</Link>
</div>
))}
</AccordionContent>
</AccordionItem>
))}

4
src/app/scripts/_components/ScriptItem.tsx
View File

@ -66,6 +66,10 @@ function ScriptItem({
className="h-32 w-32 rounded-lg bg-accent/60 object-contain p-3 shadow-md"
src={item.logo}
width={400}
onError={(e) =>
((e.currentTarget as HTMLImageElement).src =
"/logo.png")
}
height={400}
alt={item.title}
unoptimized

4
src/components/CommandMenu.tsx
View File

@ -106,6 +106,10 @@ export default function CommandMenu() {
src={script.logo}
unoptimized
height={16}
onError={(e) =>
((e.currentTarget as HTMLImageElement).src =
"/logo.png")
}
width={16}
alt=""
className="h-5 w-5"