TheWrightServer/ProxmoxVE
1
0
Fork 1
mirror of https://github.com/community-scripts/ProxmoxVE.git synced 2025-02-01 16:51:52 +00:00
Code Activity

Update page.tsx

Browse Source
This commit is contained in:
CanbiZ 2025-01-27 13:59:26 +01:00 committed by GitHub
parent ac25b5a702
commit 719da560d1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@ 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 [logoIndexes, setLogoIndexes] = useState<Record<string, number>>({}); // Track logo index for each category
const router = useRouter(); const router = useRouter();
useEffect(() => { useEffect(() => {
@ -29,6 +29,13 @@ const CategoryView = () => {
const data = await response.json(); const data = await response.json();
console.log("Fetched categories:", data); // Debugging console.log("Fetched categories:", data); // Debugging
setCategories(data); setCategories(data);
// Initialize logo indexes for all categories
const initialIndexes = data.reduce((acc: Record<string, number>, category: Category) => {
acc[category.name] = 0;
return acc;
}, {});
setLogoIndexes(initialIndexes);
} catch (error) { } catch (error) {
console.error("Error fetching categories:", error); console.error("Error fetching categories:", error);
} }
@ -39,12 +46,10 @@ 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) => {
@ -57,8 +62,25 @@ const CategoryView = () => {
: text; : text;
}; };
const getVisibleLogos = (scripts: any[]) => { const getVisibleLogos = (scripts: any[], categoryName: string) => {
return scripts.slice(logoIndex, logoIndex + MAX_LOGOS); const index = logoIndexes[categoryName] || 0;
return scripts.slice(index, index + MAX_LOGOS);
};
const updateLogoIndex = (categoryName: string, direction: "prev" | "next", totalScripts: number) => {
setLogoIndexes((prev) => {
const currentIndex = prev[categoryName] || 0;
if (direction === "prev") {
return { ...prev, [categoryName]: Math.max(0, currentIndex - MAX_LOGOS) };
}
if (direction === "next") {
return {
...prev,
[categoryName]: Math.min(currentIndex + MAX_LOGOS, totalScripts - MAX_LOGOS),
};
}
return prev;
});
}; };
return ( return (
@ -129,17 +151,17 @@ const CategoryView = () => {
<Button <Button
variant="ghost" variant="ghost"
className="p-1" className="p-1"
disabled={logoIndex === 0} disabled={logoIndexes[category.name] === 0}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setLogoIndex((prev) => Math.max(0, prev - MAX_LOGOS)); updateLogoIndex(category.name, "prev", category.scripts.length);
}} }}
> >
<ChevronLeft className="h-5 w-5" /> <ChevronLeft className="h-5 w-5" />
</Button> </Button>
<div className="flex flex-wrap justify-center gap-3"> <div className="flex flex-wrap justify-center gap-3">
{category.scripts && {category.scripts &&
getVisibleLogos(category.scripts).map((script, index) => ( getVisibleLogos(category.scripts, category.name).map((script, index) => (
<img <img
key={index} key={index}
src={script.logo || defaultLogo} src={script.logo || defaultLogo}
@ -156,10 +178,12 @@ const CategoryView = () => {
<Button <Button
variant="ghost" variant="ghost"
className="p-1" className="p-1"
disabled={logoIndex + MAX_LOGOS >= (category.scripts?.length || 0)} disabled={
logoIndexes[category.name] + MAX_LOGOS >= (category.scripts?.length || 0)
}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setLogoIndex((prev) => Math.min(prev + MAX_LOGOS, category.scripts?.length || 0)); updateLogoIndex(category.name, "next", category.scripts.length);
}} }}
> >
<ChevronRight className="h-5 w-5" /> <ChevronRight className="h-5 w-5" />