mirror of
https://github.com/community-scripts/ProxmoxVE.git
synced 2025-02-01 17:51:49 +00:00
Update page.tsx
This commit is contained in:
CanbiZ
GitHub
parent
719da560d1
commit
b17befec88
@ -8,14 +8,12 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { Category } from "@/lib/types";
|
||||
|
||||
const defaultLogo = "/default-logo.png"; // Fallback logo path
|
||||
|
||||
const MAX_DESCRIPTION_LENGTH = 100; // Set max length for description
|
||||
const MAX_LOGOS = 5; // Max logos to display at once
|
||||
|
||||
const CategoryView = () => {
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
const [selectedCategory, setSelectedCategory] = useState<Category | null>(null);
|
||||
const [logoIndexes, setLogoIndexes] = useState<Record<string, number>>({}); // Track logo index for each category
|
||||
const [selectedCategoryIndex, setSelectedCategoryIndex] = useState<number | null>(null);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
@ -29,13 +27,6 @@ const CategoryView = () => {
|
||||
const data = await response.json();
|
||||
console.log("Fetched categories:", data); // Debugging
|
||||
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) {
|
||||
console.error("Error fetching categories:", error);
|
||||
}
|
||||
@ -44,43 +35,47 @@ const CategoryView = () => {
|
||||
fetchCategories();
|
||||
}, []);
|
||||
|
||||
const handleCategoryClick = (category: Category) => {
|
||||
setSelectedCategory(category);
|
||||
const handleCategoryClick = (index: number) => {
|
||||
setSelectedCategoryIndex(index);
|
||||
};
|
||||
|
||||
const handleBackClick = () => {
|
||||
setSelectedCategory(null);
|
||||
setSelectedCategoryIndex(null);
|
||||
};
|
||||
|
||||
const handleScriptClick = (scriptSlug: string) => {
|
||||
router.push(`/scripts?id=${scriptSlug}`);
|
||||
};
|
||||
|
||||
const navigateCategory = (direction: "prev" | "next") => {
|
||||
if (selectedCategoryIndex !== null) {
|
||||
const newIndex =
|
||||
direction === "prev"
|
||||
? (selectedCategoryIndex - 1 + categories.length) % categories.length
|
||||
: (selectedCategoryIndex + 1) % categories.length;
|
||||
setSelectedCategoryIndex(newIndex);
|
||||
}
|
||||
};
|
||||
|
||||
const truncateDescription = (text: string) => {
|
||||
return text.length > MAX_DESCRIPTION_LENGTH
|
||||
? `${text.slice(0, MAX_DESCRIPTION_LENGTH)}...`
|
||||
: text;
|
||||
};
|
||||
|
||||
const getVisibleLogos = (scripts: any[], categoryName: string) => {
|
||||
const index = logoIndexes[categoryName] || 0;
|
||||
return scripts.slice(index, index + MAX_LOGOS);
|
||||
};
|
||||
const renderResources = (script: any) => {
|
||||
const cpu = script.install_methods[0]?.resources.cpu;
|
||||
const ram = script.install_methods[0]?.resources.ram;
|
||||
const hdd = script.install_methods[0]?.resources.hdd;
|
||||
|
||||
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;
|
||||
});
|
||||
const resourceParts = [];
|
||||
if (cpu) resourceParts.push(<span key="cpu"><b>CPU:</b> {cpu}vCPU</span>);
|
||||
if (ram) resourceParts.push(<span key="ram"><b>RAM:</b> {ram}MB</span>);
|
||||
if (hdd) resourceParts.push(<span key="hdd"><b>HDD:</b> {hdd}GB</span>);
|
||||
|
||||
return resourceParts.length > 0 ? (
|
||||
<div className="text-sm text-gray-400">{resourceParts.reduce((prev, curr) => [prev, " | ", curr])}</div>
|
||||
) : null;
|
||||
};
|
||||
|
||||
return (
|
||||
@ -88,14 +83,30 @@ const CategoryView = () => {
|
||||
{categories.length === 0 && (
|
||||
<p className="text-center text-gray-500">No categories available. Please check the API endpoint.</p>
|
||||
)}
|
||||
{selectedCategory ? (
|
||||
{selectedCategoryIndex !== null ? (
|
||||
<div>
|
||||
<Button variant="default" onClick={handleBackClick} className="mb-6">
|
||||
Back to Categories
|
||||
</Button>
|
||||
<h2 className="text-3xl font-semibold mb-6">{selectedCategory.name}</h2>
|
||||
{/* Header with Navigation */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => navigateCategory("prev")}
|
||||
className="p-2"
|
||||
>
|
||||
<ChevronLeft className="h-6 w-6" />
|
||||
</Button>
|
||||
<h2 className="text-3xl font-semibold">{categories[selectedCategoryIndex].name}</h2>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => navigateCategory("next")}
|
||||
className="p-2"
|
||||
>
|
||||
<ChevronRight className="h-6 w-6" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Scripts Grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
|
||||
{selectedCategory.scripts
|
||||
{categories[selectedCategoryIndex].scripts
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((script) => (
|
||||
<Card
|
||||
@ -115,23 +126,34 @@ const CategoryView = () => {
|
||||
<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"
|
||||
title={script.description || "No description available."}
|
||||
>
|
||||
{truncateDescription(script.description || "No description available.")}
|
||||
</p>
|
||||
</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>
|
||||
{renderResources(script)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Back to Categories Button */}
|
||||
<div className="mt-8 text-center">
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={handleBackClick}
|
||||
className="px-6 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-md transition"
|
||||
>
|
||||
Back to Categories
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{/* Categories Grid */}
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h1 className="text-4xl font-bold">Categories</h1>
|
||||
<p className="text-sm text-gray-500">
|
||||
@ -139,56 +161,14 @@ const CategoryView = () => {
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
|
||||
{categories.map((category) => (
|
||||
{categories.map((category, index) => (
|
||||
<Card
|
||||
key={category.name}
|
||||
onClick={() => handleCategoryClick(category)}
|
||||
onClick={() => handleCategoryClick(index)}
|
||||
className="cursor-pointer hover:shadow-lg flex flex-col items-center justify-center py-6"
|
||||
>
|
||||
<CardContent className="flex flex-col items-center">
|
||||
<h3 className="text-xl font-bold mb-4">{category.name}</h3>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="p-1"
|
||||
disabled={logoIndexes[category.name] === 0}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
updateLogoIndex(category.name, "prev", category.scripts.length);
|
||||
}}
|
||||
>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
{category.scripts &&
|
||||
getVisibleLogos(category.scripts, category.name).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={
|
||||
logoIndexes[category.name] + MAX_LOGOS >= (category.scripts?.length || 0)
|
||||
}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
updateLogoIndex(category.name, "next", category.scripts.length);
|
||||
}}
|
||||
>
|
||||
<ChevronRight className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400 text-center">
|
||||
{(category as any).description || "No description available."}
|
||||
</p>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user