From adfbff63bc56fb35942af314c7e9c3be5197900f Mon Sep 17 00:00:00 2001
From: CanbiZ <47820557+MickLesk@users.noreply.github.com>
Date: Mon, 27 Jan 2025 14:15:42 +0100
Subject: [PATCH] Update page.tsx

---
 frontend/src/app/category-view/page.tsx | 46 +++++++++++++------------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/category-view/page.tsx b/frontend/src/app/category-view/page.tsx
index 4797f74a..0b5ffa15 100644
--- a/frontend/src/app/category-view/page.tsx
+++ b/frontend/src/app/category-view/page.tsx
@@ -67,12 +67,12 @@ const CategoryView = () => {
     const cpu = script.install_methods[0]?.resources.cpu;
     const ram = script.install_methods[0]?.resources.ram;
     const hdd = script.install_methods[0]?.resources.hdd;
-  
+
     const resourceParts = [];
     if (cpu) resourceParts.push(<span key="cpu"><b>CPU:</b> {cpu}vCPU</span>);
     if (ram) resourceParts.push(<span key="ram"><b>RAM:</b> {ram}MB</span>);
     if (hdd) resourceParts.push(<span key="hdd"><b>HDD:</b> {hdd}GB</span>);
-  
+
     return resourceParts.length > 0 ? (
       <div className="text-sm text-gray-400">
         {resourceParts.map((part, index) => (
@@ -85,6 +85,14 @@ const CategoryView = () => {
     ) : null;
   };
 
+  const renderType = (type: string) => {
+    return (
+      <span className="text-xs font-semibold text-blue-500 bg-gray-200 px-2 py-1 rounded-full">
+        {type.toUpperCase()}
+      </span>
+    );
+  };
+
   return (
     <div className="p-6 mt-20">
       {categories.length === 0 && (
@@ -122,25 +130,19 @@ const CategoryView = () => {
                   onClick={() => handleScriptClick(script.slug)}
                 >
                   <CardContent className="flex flex-col gap-4">
-                    <div className="flex items-center gap-4">
-                      <img
-                        src={script.logo || defaultLogo}
-                        alt={script.name}
-                        className="h-12 w-12 object-contain"
-                      />
-                      <div>
-                        <h3 className="text-lg font-bold">{script.name}</h3>
-                        <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"
-                          title={script.description || "No description available."}
-                        >
-                          {truncateDescription(script.description || "No description available.")}
-                        </p>
-                      </div>
+                    <div className="flex justify-between">
+                      <h3 className="text-lg font-bold">{script.name}</h3>
+                      {renderType(script.type || "MISC")}
                     </div>
+                    <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 hover:text-gray-900"
+                      title={script.description || "No description available."}
+                    >
+                      {truncateDescription(script.description || "No description available.")}
+                    </p>
                     {renderResources(script)}
                   </CardContent>
                 </Card>
@@ -162,9 +164,9 @@ const CategoryView = () => {
         <div>
           {/* Categories Grid */}
           <div className="flex justify-between items-center mb-8">
-            <h1 className="text-4xl font-bold">Categories</h1>
+            <h1 className="text-3xl font-semibold mb-4">Categories</h1>
             <p className="text-sm text-gray-500">
-              {categories.reduce((acc, cat) => acc + (cat.scripts?.length || 0), 0)} Total scripts
+              {new Set(categories.flatMap((cat) => cat.scripts.map((s) => s.slug))).size} Total scripts
             </p>
           </div>
           <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">