martin/ProxmoxVE
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE synced 2025-02-04 15:00:16 +00:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

Update page.tsx

Browse Source
This commit is contained in:
CanbiZ 2025-01-27 13:31:47 +01:00 committed by GitHub
parent 14247ac5a9
commit 5dc1a7d219
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 28 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/app/category-view/page.tsx
View File

@ -52,8 +52,9 @@ const CategoryView = () => {
: text; : text;
}; };
const getRandomLogos = (scripts: any[], count: number) => { const getRandomScripts = (scripts: any[]) => {
return scripts.sort(() => Math.random() - 0.5).slice(0, count); if (!scripts || scripts.length <= 5) return scripts;
return scripts.sort(() => 0.5 - Math.random()).slice(0, 5);
}; };
return ( return (
@ -66,12 +67,16 @@ const CategoryView = () => {
<Button variant="default" onClick={handleBackClick} className="mb-4"> <Button variant="default" onClick={handleBackClick} className="mb-4">
Back to Categories Back to Categories
</Button> </Button>
<h2 className="text-3xl font-extrabold mb-4">{selectedCategory.name}</h2> <h2 className="text-3xl font-semibold mb-4">{selectedCategory.name}</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{selectedCategory.scripts {selectedCategory.scripts
.sort((a, b) => a.name.localeCompare(b.name)) .sort((a, b) => a.name.localeCompare(b.name))
.map((script) => ( .map((script) => (
<Card key={script.name} className="p-4 cursor-pointer" onClick={() => handleScriptClick(script.slug)}> <Card
key={script.name}
className="p-4 cursor-pointer"
onClick={() => handleScriptClick(script.slug)}
>
<CardContent className="flex flex-col gap-4"> <CardContent className="flex flex-col gap-4">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<img <img
@ -81,14 +86,18 @@ const CategoryView = () => {
/> />
<div> <div>
<h3 className="text-lg font-bold">{script.name}</h3> <h3 className="text-lg font-bold">{script.name}</h3>
<p className="text-sm text-gray-500"><b>Created at:</b> {script.date_created || "No date available"}</p> <p className="text-sm text-gray-500">
<b>Created at:</b> {script.date_created || "No date available"}
</p>
<p className="text-sm text-gray-700"> <p className="text-sm text-gray-700">
{truncateDescription(script.description || "No description available.")} {truncateDescription(script.description || "No description available.")}
</p> </p>
</div> </div>
</div> </div>
<div className="text-sm text-gray-600"> <div className="text-sm text-gray-600">
<b>CPU:</b> {script.install_methods[0]?.resources.cpu || "N/A"}vCPU | <b>RAM:</b> {script.install_methods[0]?.resources.ram || "N/A"}MB | <b>HDD:</b> {script.install_methods[0]?.resources.hdd || "N/A"}GB <b>CPU:</b> {script.install_methods[0]?.resources.cpu || "N/A"}vCPU |{" "}
<b>RAM:</b> {script.install_methods[0]?.resources.ram || "N/A"}MB |{" "}
<b>HDD:</b> {script.install_methods[0]?.resources.hdd || "N/A"}GB
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@ -98,12 +107,12 @@ const CategoryView = () => {
) : ( ) : (
<div> <div>
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<h1 className="text-4xl font-extrabold">Categories</h1> <h1 className="text-4xl font-bold mb-2">Categories</h1>
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500">
{categories.reduce((acc, cat) => acc + (cat.scripts?.length || 0), 0)} Total scripts {categories.reduce((acc, cat) => acc + (cat.scripts?.length || 0), 0)} Total scripts
</p> </p>
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
{categories.map((category) => ( {categories.map((category) => (
<Card <Card
key={category.name} key={category.name}
@ -111,17 +120,18 @@ const CategoryView = () => {
className="cursor-pointer hover:shadow-lg flex flex-col items-center justify-center" className="cursor-pointer hover:shadow-lg flex flex-col items-center justify-center"
> >
<CardContent className="flex flex-col items-center"> <CardContent className="flex flex-col items-center">
<div className="flex flex-wrap justify-center gap-2 mb-2"> <div className="flex flex-wrap justify-center gap-2 mb-4">
{category.scripts && getRandomLogos(category.scripts, 5).map((script, index) => ( {category.scripts &&
<img getRandomScripts(category.scripts).map((script, index) => (
key={index} <img
src={script.logo || defaultLogo} key={index}
alt={script.name || "Script logo"} src={script.logo || defaultLogo}
className="h-8 w-8 object-contain" alt={script.name || "Script logo"}
/> className="h-8 w-8 object-contain"
))} />
))}
</div> </div>
<h3 className="text-lg font-bold mb-1">{category.name}</h3> <h3 className="text-xl font-bold mb-2">{category.name}</h3>
<p className="text-sm text-gray-400 text-center"> <p className="text-sm text-gray-400 text-center">
{category.description || "No description available."} {category.description || "No description available."}
</p> </p>