TheWrightServer/ProxmoxVE
1
0
Fork 1
mirror of https://github.com/community-scripts/ProxmoxVE.git synced 2025-02-01 17:31:49 +00:00
Code 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"; "use client";
import { Category } from "@/lib/types"; import type { Category, Script } from "@/lib/types";
import ScriptAccordion from "./ScriptAccordion"; import ScriptAccordion from "./ScriptAccordion";
const Sidebar = ({ const Sidebar = ({
items, items,
selectedScript, selectedScript,
setSelectedScript, setSelectedScript,
}: { }: {
items: Category[]; items: Category[];
selectedScript: string | null; selectedScript: string | null;
setSelectedScript: (script: string | null) => void; setSelectedScript: (script: string | null) => void;
}) => { }) => {
return ( const uniqueScripts = items.reduce((acc, category) => {
<div className="flex min-w-72 flex-col sm:max-w-72"> for (const script of category.scripts) {
<div className="flex items-end justify-between pb-4"> if (!acc.some((s) => s.name === script.name)) {
<h1 className="text-xl font-bold">Categories</h1> acc.push(script);
<p className="text-xs italic text-muted-foreground"> }
{items.reduce((acc, category) => acc + category.scripts.length, 0)}{" "} }
Total scripts return acc;
</p> }, [] as Script[]);
</div>
<div className="rounded-lg"> return (
<ScriptAccordion <div className="flex min-w-72 flex-col sm:max-w-72">
items={items} <div className="flex items-end justify-between pb-4">
selectedScript={selectedScript} <h1 className="text-xl font-bold">Categories</h1>
setSelectedScript={setSelectedScript} <p className="text-xs italic text-muted-foreground">
/> {uniqueScripts.length} Total scripts
</div> </p>
</div> </div>
); <div className="rounded-lg">
<ScriptAccordion
items={items}
selectedScript={selectedScript}
setSelectedScript={setSelectedScript}
/>
</div>
</div>
);
}; };
export default Sidebar; export default Sidebar;