Update page.tsx

frontend/src/app/category-view/page.tsx

@@ -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 [selectedCategoryIndex, setSelectedCategoryIndex] = useState<number | null>(null);
-  const [logoIndexes, setLogoIndexes] = useState<Record<string, number>>({}); // Track logo index for each category
   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) => {
+  const handleCategoryClick = (index: number) => {
-    setSelectedCategory(category);
+    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 renderResources = (script: any) => {
-    const index = logoIndexes[categoryName] || 0;
+    const cpu = script.install_methods[0]?.resources.cpu;
-    return scripts.slice(index, index + MAX_LOGOS);
+    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) => {
+    const resourceParts = [];
-    setLogoIndexes((prev) => {
+    if (cpu) resourceParts.push(<span key="cpu"><b>CPU:</b> {cpu}vCPU</span>);
-      const currentIndex = prev[categoryName] || 0;
+    if (ram) resourceParts.push(<span key="ram"><b>RAM:</b> {ram}MB</span>);
-      if (direction === "prev") {
+    if (hdd) resourceParts.push(<span key="hdd"><b>HDD:</b> {hdd}GB</span>);
-        return { ...prev, [categoryName]: Math.max(0, currentIndex - MAX_LOGOS) };
+
-      }
+    return resourceParts.length > 0 ? (
-      if (direction === "next") {
+      <div className="text-sm text-gray-400">{resourceParts.reduce((prev, curr) => [prev, " | ", curr])}</div>
-        return {
+    ) : null;
-          ...prev,
-          [categoryName]: Math.min(currentIndex + MAX_LOGOS, totalScripts - MAX_LOGOS),
-        };
-      }
-      return prev;
-    });
   };
 
   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">
+          {/* Header with Navigation */}
-            Back to Categories
+          <div className="flex items-center justify-between mb-6">
-          </Button>
+            <Button
-          <h2 className="text-3xl font-semibold mb-6">{selectedCategory.name}</h2>
+              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">
+                    {renderResources(script)}
-                      <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>
                   </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>