frontend

frontend/src/components/CommandMenu.tsx

@@ -6,6 +6,7 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
+import { basePath } from "@/config/siteConfig";
 import { fetchCategories } from "@/lib/data";
 import { Category } from "@/lib/types";
 import { cn } from "@/lib/utils";
@@ -15,18 +16,17 @@ import React from "react";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import { DialogTitle } from "./ui/dialog";
-import { basePath } from "@/config/siteConfig";
 
 export const formattedBadge = (type: string) => {
   switch (type) {
     case "vm":
       return <Badge className="text-blue-500/75 border-blue-500/75">VM</Badge>;
     case "ct":
-      return (
+      return <Badge className="text-yellow-500/75 border-yellow-500/75">LXC</Badge>;
-        <Badge className="text-yellow-500/75 border-yellow-500/75">LXC</Badge>
+    case "pve":
-      );
+      return <Badge className="text-orange-500/75 border-orange-500/75">PVE</Badge>;
-    case "misc":
+    case "addon":
-      return <Badge className="text-green-500/75 border-green-500/75">MISC</Badge>;
+      return <Badge className="text-green-500/75 border-green-500/75">ADDON</Badge>;
   }
   return null;
 };
@@ -84,14 +84,9 @@ export default function CommandMenu() {
         <DialogTitle className="sr-only">Search scripts</DialogTitle>
         <CommandInput placeholder="Search for a script..." />
         <CommandList>
-          <CommandEmpty>
+          <CommandEmpty>{isLoading ? "Loading..." : "No scripts found."}</CommandEmpty>
-            {isLoading ? "Loading..." : "No scripts found."}
-          </CommandEmpty>
           {links.map((category) => (
-            <CommandGroup
+            <CommandGroup key={`category:${category.name}`} heading={category.name}>
-              key={`category:${category.name}`}
-              heading={category.name}
-            >
               {category.scripts.map((script) => (
                 <CommandItem
                   key={`script:${script.slug}`}
@@ -104,10 +99,7 @@ export default function CommandMenu() {
                   <div className="flex gap-2" onClick={() => setOpen(false)}>
                     <Image
                       src={script.logo || `/${basePath}/logo.png`}
-                      onError={(e) =>
+                      onError={(e) => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
-                        ((e.currentTarget as HTMLImageElement).src =
-                          `/${basePath}/logo.png`)
-                      }
                       unoptimized
                       width={16}
                       height={16}

frontend/src/components/FAQ.tsx

@@ -0,0 +1,29 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { Plus } from "lucide-react";
+import { FAQ_Items } from "../config/faqConfig";
+import { Accordion, AccordionContent, AccordionItem } from "./ui/accordion";
+
+export default function FAQ() {
+  return (
+    <div className="space-y-4">
+      <Accordion type="single" collapsible className="w-full">
+        {FAQ_Items.map((item, index) => (
+          <AccordionItem value={index.toString()} key={index} className="py-2">
+            <AccordionPrimitive.Header className="flex">
+              <AccordionPrimitive.Trigger className="flex flex-1 items-center gap-3 py-2 text-left text-[15px] font-semibold leading-6 transition-all [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&>svg]:-order-1 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180">
+                {item.title}
+                <Plus
+                  size={16}
+                  strokeWidth={2}
+                  className="shrink-0 opacity-60 transition-transform duration-200"
+                  aria-hidden="true"
+                />
+              </AccordionPrimitive.Trigger>
+            </AccordionPrimitive.Header>
+            <AccordionContent className="pb-2 ps-7 text-muted-foreground">{item.content}</AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  );
+}

frontend/src/components/query-provider.tsx

@@ -0,0 +1,9 @@
+"use client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React from "react";
+
+const queryClient = new QueryClient();
+
+export default function QueryProvider({ children }: { children: React.ReactNode }) {
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}