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

formatting

Browse Source
This commit is contained in:
CanbiZ 2025-01-23 11:40:58 +01:00
parent 69d9b4f439
commit 250e77cff7
1 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@ const CategoryView = () => {
const fetchCategories = async () => { const fetchCategories = async () => {
try { try {
const basePath = process.env.NODE_ENV === "production" ? "/ProxmoxVE" : ""; const basePath = process.env.NODE_ENV === "production" ? "/ProxmoxVE" : "";
const response = await fetch(`${basePath}/api/categories`); // Prüfe den Endpunkt const response = await fetch(`${basePath}/api/categories`);
if (!response.ok) { if (!response.ok) {
throw new Error("Failed to fetch categories"); throw new Error("Failed to fetch categories");
} }
@ -39,19 +39,18 @@ const CategoryView = () => {
}; };
return ( return (
<div className="p-4"> <div className="p-4 mt-20">
{categories.length === 0 ? ( {categories.length === 0 && (
<p className="text-center text-gray-500"> <p className="text-center text-gray-500">No categories available. Please check the API endpoint.</p>
No categories available. Please check the API endpoint. )}
</p> {selectedCategory ? (
) : selectedCategory ? (
<div> <div>
<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-xl font-semibold mb-4">{selectedCategory.name}</h2> <h2 className="text-xl 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}> <Card key={script.name}>
@ -67,7 +66,12 @@ const CategoryView = () => {
</div> </div>
) : ( ) : (
<div> <div>
<h1 className="text-2xl font-bold mb-6">Categories</h1> <div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-bold">Categories</h1>
<p className="text-sm text-gray-500">
{categories.reduce((acc, cat) => acc + (cat.scripts?.length || 0), 0)} Total scripts
</p>
</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-4">
{categories.map((category) => ( {categories.map((category) => (
<Card <Card
@ -77,7 +81,7 @@ const CategoryView = () => {
> >
<CardContent className="flex flex-col items-center"> <CardContent className="flex flex-col items-center">
<div className="flex flex-wrap justify-center gap-1 mb-2"> <div className="flex flex-wrap justify-center gap-1 mb-2">
{(category.scripts || []).slice(0, 4).map((script, index) => ( {category.scripts && category.scripts.slice(0, 4).map((script, index) => (
<img <img
key={index} key={index}
src={script.logo || defaultLogo} src={script.logo || defaultLogo}
@ -88,7 +92,7 @@ const CategoryView = () => {
</div> </div>
<h3 className="text-lg font-bold mb-1">{category.name}</h3> <h3 className="text-lg font-bold mb-1">{category.name}</h3>
<p className="text-sm text-gray-500 text-center"> <p className="text-sm text-gray-500 text-center">
{(category as any).description || "No description available."} {category.description || "No description available."}
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
@ -100,4 +104,4 @@ const CategoryView = () => {
); );
}; };
export default CategoryView; export default CategoryView;