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:53:00 +01:00 committed by GitHub
parent 030174f508
commit ce1a38eb50
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -58,17 +58,17 @@ const CategoryView = () => {
}; };
return ( return (
<div className="p-4 mt-20"> <div className="p-6 mt-20">
{categories.length === 0 && ( {categories.length === 0 && (
<p className="text-center text-gray-500">No categories available. Please check the API endpoint.</p> <p className="text-center text-gray-500">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-6">
Back to Categories Back to Categories
</Button> </Button>
<h2 className="text-3xl font-semibold mb-4">{selectedCategory.name}</h2> <h2 className="text-3xl font-semibold mb-6">{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-6">
{selectedCategory.scripts {selectedCategory.scripts
.sort((a, b) => a.name.localeCompare(b.name)) .sort((a, b) => a.name.localeCompare(b.name))
.map((script) => ( .map((script) => (
@ -108,29 +108,34 @@ const CategoryView = () => {
</div> </div>
) : ( ) : (
<div> <div>
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-8">
<h1 className="text-4xl font-bold mb-2">Categories</h1> <h1 className="text-4xl font-bold">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-6"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
{categories.map((category) => ( {categories.map((category) => (
<Card <Card
key={category.name} key={category.name}
onClick={() => handleCategoryClick(category)} onClick={() => handleCategoryClick(category)}
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 py-6"
> >
<CardContent className="flex flex-col items-center"> <CardContent className="flex flex-col items-center">
<h3 className="text-xl font-bold mb-2">{category.name}</h3> <h3 className="text-xl font-bold mb-4">{category.name}</h3>
<div className="flex flex-wrap justify-center gap-2 mb-4"> <div className="flex flex-wrap justify-center gap-3 mb-4">
{category.scripts && {category.scripts &&
getRandomScripts(category.scripts).map((script, index) => ( getRandomScripts(category.scripts).map((script, index) => (
<img <img
key={index} key={index}
src={script.logo || defaultLogo} src={script.logo || defaultLogo}
alt={script.name || "Script logo"} alt={script.name || "Script logo"}
className="h-8 w-8 object-contain" 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> </div>