martin/ProxmoxVE
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE synced 2025-02-04 23:10: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:56:09 +01:00 committed by GitHub
parent ce1a38eb50
commit ac25b5a702
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 60 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,15 +4,18 @@ import React, { useEffect, useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Category } from "@/lib/types"; import { Category } from "@/lib/types";
const defaultLogo = "/default-logo.png"; // Fallback logo path const defaultLogo = "/default-logo.png"; // Fallback logo path
const MAX_DESCRIPTION_LENGTH = 100; // Set max length for description const MAX_DESCRIPTION_LENGTH = 100; // Set max length for description
const MAX_LOGOS = 5; // Max logos to display at once
const CategoryView = () => { const CategoryView = () => {
const [categories, setCategories] = useState<Category[]>([]); const [categories, setCategories] = useState<Category[]>([]);
const [selectedCategory, setSelectedCategory] = useState<Category | null>(null); const [selectedCategory, setSelectedCategory] = useState<Category | null>(null);
const [logoIndex, setLogoIndex] = useState(0); // Keeps track of logo pagination
const router = useRouter(); const router = useRouter();
useEffect(() => { useEffect(() => {
@ -36,10 +39,12 @@ const CategoryView = () => {
const handleCategoryClick = (category: Category) => { const handleCategoryClick = (category: Category) => {
setSelectedCategory(category); setSelectedCategory(category);
setLogoIndex(0); // Reset logo pagination when switching categories
}; };
const handleBackClick = () => { const handleBackClick = () => {
setSelectedCategory(null); setSelectedCategory(null);
setLogoIndex(0); // Reset logo pagination when going back
}; };
const handleScriptClick = (scriptSlug: string) => { const handleScriptClick = (scriptSlug: string) => {
@ -52,9 +57,8 @@ const CategoryView = () => {
: text; : text;
}; };
const getRandomScripts = (scripts: any[]) => { const getVisibleLogos = (scripts: any[]) => {
if (!scripts || scripts.length <= 5) return scripts; return scripts.slice(logoIndex, logoIndex + MAX_LOGOS);
return scripts.sort(() => 0.5 - Math.random()).slice(0, 5);
}; };
return ( return (
@ -78,29 +82,27 @@ const CategoryView = () => {
onClick={() => handleScriptClick(script.slug)} onClick={() => handleScriptClick(script.slug)}
> >
<CardContent className="flex flex-col gap-4"> <CardContent className="flex flex-col gap-4">
<div> <div className="flex items-center gap-4">
<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>
</div>
<div className="flex flex-wrap justify-center gap-2">
<img <img
src={script.logo || defaultLogo} src={script.logo || defaultLogo}
alt={script.name} alt={script.name}
className="h-12 w-12 object-contain" className="h-12 w-12 object-contain"
/> />
</div> <div>
<div> <h3 className="text-lg font-bold">{script.name}</h3>
<p className="text-sm text-gray-700"> <p className="text-sm text-gray-500">
{truncateDescription(script.description || "No description available.")} <b>Created at:</b> {script.date_created || "No date available"}
</p> </p>
<div className="text-sm text-gray-600 mt-2"> <p className="text-sm text-gray-700">
<b>CPU:</b> {script.install_methods[0]?.resources.cpu || "N/A"}vCPU |{" "} {truncateDescription(script.description || "No description available.")}
<b>RAM:</b> {script.install_methods[0]?.resources.ram || "N/A"}MB |{" "} </p>
<b>HDD:</b> {script.install_methods[0]?.resources.hdd || "N/A"}GB
</div> </div>
</div> </div>
<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
</div>
</CardContent> </CardContent>
</Card> </Card>
))} ))}
@ -123,21 +125,45 @@ const CategoryView = () => {
> >
<CardContent className="flex flex-col items-center"> <CardContent className="flex flex-col items-center">
<h3 className="text-xl font-bold mb-4">{category.name}</h3> <h3 className="text-xl font-bold mb-4">{category.name}</h3>
<div className="flex flex-wrap justify-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
{category.scripts && <Button
getRandomScripts(category.scripts).map((script, index) => ( variant="ghost"
<img className="p-1"
key={index} disabled={logoIndex === 0}
src={script.logo || defaultLogo} onClick={(e) => {
alt={script.name || "Script logo"} e.stopPropagation();
title={script.name} // Tooltip on hover setLogoIndex((prev) => Math.max(0, prev - MAX_LOGOS));
onClick={(e) => { }}
e.stopPropagation(); // Prevent card click >
handleScriptClick(script.slug); <ChevronLeft className="h-5 w-5" />
}} </Button>
className="h-8 w-8 object-contain cursor-pointer hover:scale-110 transition-transform" <div className="flex flex-wrap justify-center gap-3">
/> {category.scripts &&
))} getVisibleLogos(category.scripts).map((script, index) => (
<img
key={index}
src={script.logo || defaultLogo}
alt={script.name || "Script logo"}
title={script.name} // Tooltip on hover
onClick={(e) => {
e.stopPropagation(); // Prevent card click
handleScriptClick(script.slug);
}}
className="h-8 w-8 object-contain cursor-pointer hover:scale-110 transition-transform"
/>
))}
</div>
<Button
variant="ghost"
className="p-1"
disabled={logoIndex + MAX_LOGOS >= (category.scripts?.length || 0)}
onClick={(e) => {
e.stopPropagation();
setLogoIndex((prev) => Math.min(prev + MAX_LOGOS, category.scripts?.length || 0));
}}
>
<ChevronRight className="h-5 w-5" />
</Button>
</div> </div>
<p className="text-sm text-gray-400 text-center"> <p className="text-sm text-gray-400 text-center">
{(category as any).description || "No description available."} {(category as any).description || "No description available."}