added shareable link feature as per requested

app/scripts/page.tsx

@@ -9,6 +9,7 @@ import {
 import { Input } from "@/components/ui/input";
 import ScriptItem from "@/components/Script";
 import { Category } from "@/lib/types";
+import Link from "next/link";
 
 export default function Page() {
   const [selectedItem, setSelectedItem] = useState("");
@@ -69,7 +70,7 @@ export default function Page() {
           />
           <Accordion
             type={searchTerm ? "multiple" : "single"}
-            {...(searchTerm ? {} : { collapsible: true})}
+            {...(searchTerm ? {} : { collapsible: true })}
           >
             {links.map(
               (category) =>
@@ -96,12 +97,16 @@ export default function Page() {
                             .toLowerCase()
                             .includes(searchTerm.toLowerCase()),
                       ).map((script, index) => (
-                        <p
-                          className="cursor-pointer py-1 text-muted-foreground"
-                          onClick={() => setSelectedItem(script.scriptID)}
-                          key={index}
-                        >
-                          {script.title}
+                        <p key={index}>
+                          <Link
+                            href={{
+                              pathname: "/scripts",
+                              query: { id: script.scriptID },
+                            }}
+                            className="py-1 text-muted-foreground"
+                          >
+                            {script.title}
+                          </Link>
                         </p>
                       ))}
                     </AccordionContent>
@@ -112,7 +117,7 @@ export default function Page() {
         </div>
         <div className="flex">
           <div className="h-screen w-full">
-            <ScriptItem scriptID={selectedItem} />
+            <ScriptItem/>
           </div>
         </div>
       </div>

components/Script.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { pb } from "@/lib/pocketbase";
 import Image from "next/image";
 import { Suspense, useEffect, useState } from "react";
@@ -7,23 +8,24 @@ import { toast } from "sonner";
 import { Clipboard, Info } from "lucide-react";
 import { Separator } from "@/components/ui/separator";
 import Link from "next/link";
-import { Script, ScriptProps } from "@/lib/types";
+import { Script } from "@/lib/types";
+import { useSearchParams  } from "next/navigation";
 
-const ScriptItem: React.FC<ScriptProps> = ({ scriptID }) => {
+function ScriptItem() {
   const [item, setItem] = useState<Script | null>(null);
+  const searchParams = useSearchParams();
+  const id = searchParams.get("id");
 
   const getItem = async () => {
-    const record = await pb
-      .collection("proxmox_scripts")
-      .getOne(`${scriptID}`, {});
+    const record = await pb.collection("proxmox_scripts").getOne(`${id}`, {});
     setItem(record as unknown as Script);
   };
 
   useEffect(() => {
-    if (scriptID) {
+    if (id) {
       getItem();
     }
-  }, [scriptID]);
+  }, [id]);
 
   function handleCopy(type: string, value: any) {
     navigator.clipboard.writeText(value);
@@ -235,4 +237,4 @@ const ScriptItem: React.FC<ScriptProps> = ({ scriptID }) => {
   );
 };
 
-export default ScriptItem;
+export default ScriptItem;