martin/ProxmoxVE
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE synced 2025-02-25 01:13:40 +00:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

Update page.tsx

Browse Source
This commit is contained in:
CanbiZ 2025-01-23 12:01:39 +01:00
parent 51005a6b52
commit 3ee076e7ab
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
"use client"; "use client";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Category } from "@/lib/types"; import { Category } from "@/lib/types";
@ -12,6 +13,7 @@ const MAX_DESCRIPTION_LENGTH = 100; // Set max length for description
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 router = useRouter();
useEffect(() => { useEffect(() => {
const fetchCategories = async () => { const fetchCategories = async () => {
@ -40,6 +42,10 @@ const CategoryView = () => {
setSelectedCategory(null); setSelectedCategory(null);
}; };
const handleScriptClick = (scriptSlug: string) => {
router.push(`/scripts?id=${scriptSlug}`);
};
const truncateDescription = (text: string) => { const truncateDescription = (text: string) => {
return text.length > MAX_DESCRIPTION_LENGTH return text.length > MAX_DESCRIPTION_LENGTH
? `${text.slice(0, MAX_DESCRIPTION_LENGTH)}...` ? `${text.slice(0, MAX_DESCRIPTION_LENGTH)}...`
@ -61,7 +67,7 @@ const CategoryView = () => {
{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} className="p-4"> <Card key={script.name} className="p-4 cursor-pointer" onClick={() => handleScriptClick(script.slug)}>
<CardContent className="flex flex-col gap-4"> <CardContent className="flex flex-col gap-4">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<img <img
@ -78,7 +84,7 @@ const CategoryView = () => {
</div> </div>
</div> </div>
<div className="text-sm text-gray-600"> <div className="text-sm text-gray-600">
<b>Settings:</b> <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 <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> </div>
</CardContent> </CardContent>
</Card> </Card>