From 92f682be4ebcad12f0ab052ea37ad4bc041ef108 Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Fri, 10 May 2024 18:44:28 +0200
Subject: [PATCH] Update UI and fix layout issues in page.tsx,
 LatestScripts.tsx, and Script.tsx components

---
 app/scripts/page.tsx         |  6 +--
 components/LatestScripts.tsx |  2 +-
 components/Navbar.tsx        | 86 ++++++++++++++++++------------------
 3 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/app/scripts/page.tsx b/app/scripts/page.tsx
index f5dd26b..5d90886 100644
--- a/app/scripts/page.tsx
+++ b/app/scripts/page.tsx
@@ -8,14 +8,14 @@ export default function Page() {
   return (
     <>
       <Particles
-        className="animate-fade-in absolute inset-0 -z-10"
+        className="animate-fade-in absolute  inset-0 -z-10"
         quantity={100}
       />
-      <div className="mt-20 flex px-7 xl:px-0">
+      <div className="mt-20 flex sm:px-7 xl:px-0">
         <div className="hidden sm:flex">
           <ScriptBrowser />
         </div>
-        <div className="mx-7 sm:ml-7 w-full sm:mx-0">
+        <div className="mx-7 w-full sm:mx-0 sm:ml-7">
           <ScriptItem />
         </div>
       </div>
diff --git a/components/LatestScripts.tsx b/components/LatestScripts.tsx
index 032b1a4..d7f0bc8 100644
--- a/components/LatestScripts.tsx
+++ b/components/LatestScripts.tsx
@@ -36,7 +36,7 @@ function LatestScripts() {
         {latestScripts.map((item) => (
           <Card
             key={item.id}
-            className=" min-w-[250px] max-w-[310.6666666666667px] flex-grow animate-fade-up"
+            className=" min-w-[250px] flex-1 flex-grow animate-fade-up"
           >
             <CardHeader>
               <CardTitle className="flex items-center gap-3">
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 5ec9ebf..53d2471 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -28,9 +28,13 @@ import {
 } from "@/components/ui/accordion";
 import { Input } from "@/components/ui/input";
 import { Category } from "@/lib/types";
+import { pb } from "@/lib/pocketbase";
 
 function Navbar() {
   const [isScrolled, setIsScrolled] = useState(false);
+  const [links, setLinks] = useState<Category[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     const handleScroll = () => {
@@ -44,10 +48,6 @@ function Navbar() {
     };
   }, []);
 
-    const [links, setLinks] = useState<Category[]>([]);
-    const [searchTerm, setSearchTerm] = useState("");
-    const inputRef = useRef<HTMLInputElement>(null);
-
     useEffect(() => {
       const handleKeyDown = (event: KeyboardEvent) => {
         if (event.key === "/") {
@@ -62,33 +62,33 @@ function Navbar() {
       };
     }, []);
 
-    const fetchLinks = async () => {
-      try {
-        const res = await fetch(
-          `${process.env.NEXT_PUBLIC_POCKETBASE_URL}/api/collections/proxmox_items/records`,
-        );
-        const data = await res.json();
-        setLinks(data.items as Category[]);
-      } catch (error) {
-        console.error("Error fetching links:", error);
-      }
-    };
+  const fetchLinks = async () => {
+    try {
+      // you can also fetch all records at once via getFullList
+      const res = await pb.collection("categories").getFullList({
+        expand: "items",
+      });
+      setLinks(res as unknown as Category[]);
+    } catch (error) {
+      console.error("Error fetching links:", error);
+    }
+  };
 
-    useEffect(() => {
-      fetchLinks();
-    }, []);
+  useEffect(() => {
+    fetchLinks();
+  }, []);
 
-    const handleSearch = (value: string) => {
-      setSearchTerm(value);
-    };
+  const handleSearch = (value: string) => {
+    setSearchTerm(value);
+  };
 
-    const filteredLinks = useMemo(() => {
-      return links.filter((category) =>
-        category.Items.some((script) =>
-          script.title.toLowerCase().includes(searchTerm.toLowerCase()),
-        ),
-      );
-    }, [links, searchTerm]);
+  const filteredLinks = useMemo(() => {
+    return links.filter((category) =>
+      category.expand.items.some((script) =>
+        script.title.toLowerCase().includes(searchTerm.toLowerCase()),
+      ),
+    );
+  }, [links, searchTerm]);
 
   return (
     <>
@@ -129,33 +129,33 @@ function Navbar() {
                       >
                         {filteredLinks.map((category) => (
                           <AccordionItem
-                            key={category.id}
-                            value={category.Catagory_Title}
+                            key={category.collectionId}
+                            value={category.catagoryName}
                             className={`sm:text-md flex flex-col gap-2`}
                           >
                             <AccordionTrigger>
-                              {category.Catagory_Title}
+                              {category.catagoryName}
                             </AccordionTrigger>
                             <AccordionContent>
-                              {category.Items.filter((script) =>
-                                script.title
-                                  .toLowerCase()
-                                  .includes(searchTerm.toLowerCase()),
-                              ).map((script, index) => (
-                                <div key={index} className="py-1">
-                                  <SheetClose asChild>
+                              {category.expand.items
+                                .filter((script) =>
+                                  script.title
+                                    .toLowerCase()
+                                    .includes(searchTerm.toLowerCase()),
+                                )
+                                .map((script, index) => (
+                                  <p key={index} className="py-1">
                                     <Link
                                       href={{
                                         pathname: "/scripts",
-                                        query: { id: script.scriptID },
+                                        query: { id: script.id },
                                       }}
                                       className="text-muted-foreground"
                                     >
-                                      {script.title}
+                                      {script.title} {script.item_type}
                                     </Link>
-                                  </SheetClose>
-                                </div>
-                              ))}
+                                  </p>
+                                ))}
                             </AccordionContent>
                           </AccordionItem>
                         ))}