Update components to display most popular scripts

components/LatestScripts.tsx

@@ -20,6 +20,7 @@ function LatestScripts() {
   async function getLatestScripts() {
     const res = await pb.collection("proxmox_scripts").getList(1, 3, {
       sort: "-created",
+      requestKey: "latest_scripts",
     });
 
     setLatestScripts(res.items as unknown as Script[]);
@@ -31,19 +32,23 @@ function LatestScripts() {
 
   return (
     <div className="">
-      <h2 className="mb-2 text-lg font-semibold ">Newest Scripts</h2>
+      <h2 className="mb-2 text-lg font-semibold ">
+        Newest Scripts
+      </h2>
       <div className="min-w flex w-full flex-row flex-wrap gap-4">
         {latestScripts.map((item) => (
           <Card
             key={item.id}
-            className=" min-w-[250px] flex-1 flex-grow animate-fade-up"
+            className=" min-w-[250px] flex-1 flex-grow "
           >
             <CardHeader>
               <CardTitle className="flex items-center gap-3">
                 <div className="flex max-h-16 min-h-16 min-w-16 max-w-16 items-center justify-center rounded-lg bg-accent p-1">
                   <Image src={item.logo} height={40} width={40} alt=""></Image>
                 </div>
-                <h3 className="text-xl">{item.title}{" "}{item.item_type}</h3>
+                <h3 className="text-xl">
+                  {item.title} {item.item_type}
+                </h3>
               </CardTitle>
               <p className="text-sm text-muted-foreground">
                 Date added: {extractDate(item.created)}

components/MostPopulairScripts.tsx

@@ -0,0 +1,85 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { pb } from "@/lib/pocketbase";
+import { useEffect, useState } from "react";
+import { Script } from "@/lib/types";
+import Link from "next/link";
+import Image from "next/image";
+import { Button } from "./ui/button";
+import { extractDate } from "@/lib/time";
+
+export default function MostPopulairScripts() {
+  const [latestScripts, setLatestScripts] = useState<Script[]>([]);
+
+  async function getLatestScripts() {
+    try {
+      const res = await pb.collection("proxmox_scripts").getList(1, 3, {
+        sort: "created",
+        filter: "isMostPopulair = true",
+      });
+      setLatestScripts(res.items as unknown as Script[]);
+    } catch (error) {
+      console.error("Error fetching scripts:", error);
+    }
+  }
+
+
+
+  useEffect(() => {
+    getLatestScripts();
+  }, []);
+
+  return (
+    <div className="">
+      <h2 className="mb-2 text-lg font-semibold">
+        Most Populair Scripts
+      </h2>
+      <div className="min-w flex w-full flex-row flex-wrap gap-4">
+        {latestScripts.map((item) => (
+          <Card
+            key={item.id}
+            className=" min-w-[250px] flex-1 flex-grow"
+          >
+            <CardHeader>
+              <CardTitle className="flex items-center gap-3">
+                <div className="flex max-h-16 min-h-16 min-w-16 max-w-16 items-center justify-center rounded-lg bg-accent p-1">
+                  <Image src={item.logo} height={40} width={40} alt=""></Image>
+                </div>
+                <h3 className="text-xl">
+                  {item.title} {item.item_type}
+                </h3>
+              </CardTitle>
+              <p className="text-sm text-muted-foreground">
+                Date added: {extractDate(item.created)}
+              </p>
+            </CardHeader>
+            <CardContent>
+              <CardDescription className="line-clamp-3 text-card-foreground">
+                {item.description}
+              </CardDescription>
+            </CardContent>
+            <CardFooter className="">
+              <Button asChild variant="secondary">
+                <Link
+                  href={{
+                    pathname: "/scripts",
+                    query: { id: item.title },
+                  }}
+                  className="text-muted-foreground"
+                >
+                  View Script
+                </Link>
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

components/Script.tsx

@@ -12,6 +12,7 @@ import { Script } from "@/lib/types";
 import { useSearchParams  } from "next/navigation";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import LatestScripts from "./LatestScripts";
+import MostPopulairScripts from "./MostPopulairScripts";
 
 function ScriptItem() {
   const [item, setItem] = useState<Script | null>(null);
@@ -384,9 +385,10 @@ function ScriptItem() {
         </div>
       )}
       {item ? null : (
-        <>
+        <div className="flex flex-col w-full gap-5">
           <LatestScripts />
-        </>
+          <MostPopulairScripts />
+        </div>
       )}
     </Suspense>
   );

lib/types.ts

@@ -29,6 +29,7 @@ export type Script = {
   title: string;
   updated: string;
   website: string;
+  isMostPopular: boolean;
 };
 
 export interface Category {