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 17:51:25 +01:00 committed by GitHub
parent 452012529c
commit be92f947cd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -139,15 +139,17 @@ const CategoryView = () => {
<Button <Button
variant="ghost" variant="ghost"
onClick={() => navigateCategory("prev")} onClick={() => navigateCategory("prev")}
className="p-2" className="p-2 transition-transform duration-300 hover:scale-105"
> >
<ChevronLeft className="h-6 w-6" /> <ChevronLeft className="h-6 w-6" />
</Button> </Button>
<h2 className="text-3xl font-semibold">{categories[selectedCategoryIndex].name}</h2> <h2 className="text-3xl font-semibold transition-opacity duration-300 hover:opacity-90">
{categories[selectedCategoryIndex].name}
</h2>
<Button <Button
variant="ghost" variant="ghost"
onClick={() => navigateCategory("next")} onClick={() => navigateCategory("next")}
className="p-2" className="p-2 transition-transform duration-300 hover:scale-105"
> >
<ChevronRight className="h-6 w-6" /> <ChevronRight className="h-6 w-6" />
</Button> </Button>
@ -160,11 +162,13 @@ const CategoryView = () => {
.map((script) => ( .map((script) => (
<Card <Card
key={script.name} key={script.name}
className="p-4 cursor-pointer" className="p-4 cursor-pointer hover:shadow-md transition-shadow duration-300"
onClick={() => handleScriptClick(script.slug)} onClick={() => handleScriptClick(script.slug)}
> >
<CardContent className="flex flex-col gap-4"> <CardContent className="flex flex-col gap-4">
<h3 className="text-lg font-bold script-text text-center">{script.name}</h3> <h3 className="text-lg font-bold script-text text-center hover:text-blue-600 transition-colors duration-300">
{script.name}
</h3>
<img <img
src={script.logo || defaultLogo} src={script.logo || defaultLogo}
alt={script.name || "Script logo"} alt={script.name || "Script logo"}
@ -174,7 +178,7 @@ const CategoryView = () => {
<b>Created at:</b> {script.date_created || "No date available"} <b>Created at:</b> {script.date_created || "No date available"}
</p> </p>
<p <p
className="text-sm text-gray-700 hover:text-gray-900 text-center" className="text-sm text-gray-700 hover:text-gray-900 text-center transition-colors duration-300"
title={script.description || "No description available."} title={script.description || "No description available."}
> >
{truncateDescription(script.description || "No description available.")} {truncateDescription(script.description || "No description available.")}
@ -190,7 +194,7 @@ const CategoryView = () => {
<Button <Button
variant="default" variant="default"
onClick={handleBackClick} onClick={handleBackClick}
className="px-6 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-md transition" className="px-6 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-md transition-transform duration-300 hover:scale-105"
> >
Back to Categories Back to Categories
</Button> </Button>
@ -210,10 +214,12 @@ const CategoryView = () => {
<Card <Card
key={category.name} key={category.name}
onClick={() => handleCategoryClick(index)} onClick={() => handleCategoryClick(index)}
className="cursor-pointer hover:shadow-lg flex flex-col items-center justify-center py-6" className="cursor-pointer hover:shadow-lg flex flex-col items-center justify-center py-6 transition-shadow duration-300"
> >
<CardContent className="flex flex-col items-center"> <CardContent className="flex flex-col items-center">
<h3 className="text-xl font-bold mb-4 category-title">{category.name}</h3> <h3 className="text-xl font-bold mb-4 category-title transition-colors duration-300 hover:text-blue-600">
{category.name}
</h3>
<div className="flex justify-center items-center gap-2 mb-4"> <div className="flex justify-center items-center gap-2 mb-4">
<Button <Button
variant="ghost" variant="ghost"
@ -221,7 +227,7 @@ const CategoryView = () => {
e.stopPropagation(); e.stopPropagation();
switchLogos(category.name, "prev"); switchLogos(category.name, "prev");
}} }}
className="p-1" className="p-1 transition-transform duration-300 hover:scale-110"
> >
<ChevronLeft className="h-4 w-4" /> <ChevronLeft className="h-4 w-4" />
</Button> </Button>
@ -229,17 +235,19 @@ const CategoryView = () => {
category.scripts category.scripts
.slice(logoIndices[category.name] || 0, (logoIndices[category.name] || 0) + MAX_LOGOS) .slice(logoIndices[category.name] || 0, (logoIndices[category.name] || 0) + MAX_LOGOS)
.map((script, i) => ( .map((script, i) => (
<img <div key={i} className="flex flex-col items-center">
key={i} <img
src={script.logo || defaultLogo} src={script.logo || defaultLogo}
alt={script.name || "Script logo"} alt={script.name || "Script logo"}
title={script.name} title={script.name}
className="h-8 w-8 object-contain cursor-pointer" className="h-8 w-8 object-contain cursor-pointer"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
handleScriptClick(script.slug); handleScriptClick(script.slug);
}} }}
/> />
{formattedBadge(script.type)}
</div>
))} ))}
<Button <Button
variant="ghost" variant="ghost"
@ -247,7 +255,7 @@ const CategoryView = () => {
e.stopPropagation(); e.stopPropagation();
switchLogos(category.name, "next"); switchLogos(category.name, "next");
}} }}
className="p-1" className="p-1 transition-transform duration-300 hover:scale-110"
> >
<ChevronRight className="h-4 w-4" /> <ChevronRight className="h-4 w-4" />
</Button> </Button>