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

Refactor Sidebar component to display unique scripts count (#1681)

Browse Source
This commit is contained in:
Bram Suurd 2025-01-22 21:16:21 +01:00 committed by GitHub
parent 3c68db9b3a
commit 022288ef8e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 34 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/app/scripts/_components/Sidebar.tsx
View File

@ -1,35 +1,43 @@
"use client";
import { Category } from "@/lib/types";
import type { Category, Script } from "@/lib/types";
import ScriptAccordion from "./ScriptAccordion";
const Sidebar = ({
items,
selectedScript,
setSelectedScript,
items,
selectedScript,
setSelectedScript,
}: {
items: Category[];
selectedScript: string | null;
setSelectedScript: (script: string | null) => void;
items: Category[];
selectedScript: string | null;
setSelectedScript: (script: string | null) => void;
}) => {
return (
<div className="flex min-w-72 flex-col sm:max-w-72">
<div className="flex items-end justify-between pb-4">
<h1 className="text-xl font-bold">Categories</h1>
<p className="text-xs italic text-muted-foreground">
{items.reduce((acc, category) => acc + category.scripts.length, 0)}{" "}
Total scripts
</p>
</div>
<div className="rounded-lg">
<ScriptAccordion
items={items}
selectedScript={selectedScript}
setSelectedScript={setSelectedScript}
/>
</div>
</div>
);
const uniqueScripts = items.reduce((acc, category) => {
for (const script of category.scripts) {
if (!acc.some((s) => s.name === script.name)) {
acc.push(script);
}
}
return acc;
}, [] as Script[]);
return (
<div className="flex min-w-72 flex-col sm:max-w-72">
<div className="flex items-end justify-between pb-4">
<h1 className="text-xl font-bold">Categories</h1>
<p className="text-xs italic text-muted-foreground">
{uniqueScripts.length} Total scripts
</p>
</div>
<div className="rounded-lg">
<ScriptAccordion
items={items}
selectedScript={selectedScript}
setSelectedScript={setSelectedScript}
/>
</div>
</div>
);
};
export default Sidebar;
export default Sidebar;