Refactor page.tsx and Script.tsx components

app/scripts/page.tsx

@@ -1,7 +1,6 @@
 'use client'
 import Navbar from "@/components/Navbar";
 import React, { useEffect, useState } from "react";
-import Script from "@/components/Script";
 import {
   Accordion,
   AccordionItem,
@@ -9,6 +8,7 @@ import {
   AccordionContent,
 } from "@/components/ui/accordion";
 import { Input } from "@/components/ui/input";
+import ScriptItem from "@/components/Script";
 
 interface Script {
   title: string;
@@ -103,7 +103,7 @@ export default function Page() {
         </div>
         <div className="flex">
           <div className="h-screen w-full">
-            <Script scriptID={selectedItem} />
+            <ScriptItem scriptID={selectedItem} />
           </div>
         </div>
       </div>

components/Script.tsx

@@ -37,14 +37,14 @@ type RecordModel = {
   updated: string;
 };
 
-const Script: React.FC<ScriptProps> = ({ scriptID }) => {
+const ScriptItem: React.FC<ScriptProps> = ({ scriptID }) => {
   const [item, setItem] = useState<Script | null>(null);
 
   const getItem = async () => {
     const record = await pb
       .collection("proxmox_scripts")
       .getOne(`${scriptID}`, {});
-    setItem(record as Script);
+    setItem(record as unknown as Script);
   };
 
   useEffect(() => {
@@ -202,4 +202,4 @@ const Script: React.FC<ScriptProps> = ({ scriptID }) => {
   );
 };
 
-export default Script;
+export default ScriptItem;

components/Sidebar.tsx

@@ -1,3 +1,4 @@
+'use client'
 import React, { useState, useEffect } from "react";
 import {
   Accordion,