- You can use the following credentials to login to the {item.name}{" "}
- {item.type}.
+ You can use the following credentials to login to the {item.name} {item.type}.
{["username", "password"].map((type) => (
{type.charAt(0).toUpperCase() + type.slice(1)}:{" "}
- copyCredential(type as "username" | "password")}
- >
+ copyCredential(type as "username" | "password")}>
{item.default_credentials[type as "username" | "password"]}
diff --git a/frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx b/frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx
index bfa61759d..33ae0b862 100644
--- a/frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx
@@ -1,51 +1,29 @@
import { Script } from "@/lib/types";
export default function DefaultSettings({ item }: { item: Script }) {
- const getDisplayValueFromRAM = (ram: number) =>
- ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`;
+ const getDisplayValueFromRAM = (ram: number) => (ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`);
- const ResourceDisplay = ({
- settings,
- title,
- }: {
- settings: (typeof item.install_methods)[0];
- title: string;
- }) => {
+ const ResourceDisplay = ({ settings, title }: { settings: (typeof item.install_methods)[0]; title: string }) => {
const { cpu, ram, hdd } = settings.resources;
return (
{title}
CPU: {cpu}vCPU
-
- RAM: {getDisplayValueFromRAM(ram ?? 0)}
-
+
RAM: {getDisplayValueFromRAM(ram ?? 0)}
HDD: {hdd}GB
);
};
- const defaultSettings = item.install_methods.find(
- (method) => method.type === "default",
- );
- const defaultAlpineSettings = item.install_methods.find(
- (method) => method.type === "alpine",
- );
+ const defaultSettings = item.install_methods.find((method) => method.type === "default");
+ const defaultAlpineSettings = item.install_methods.find((method) => method.type === "alpine");
- const hasDefaultSettings =
- defaultSettings?.resources &&
- Object.values(defaultSettings.resources).some(Boolean);
+ const hasDefaultSettings = defaultSettings?.resources && Object.values(defaultSettings.resources).some(Boolean);
return (
- <>
- {hasDefaultSettings && (
-
- )}
- {defaultAlpineSettings && (
-
- )}
-
+
+ {hasDefaultSettings &&
);
}
diff --git a/frontend/src/app/scripts/_components/ScriptItems/InterFaces.tsx b/frontend/src/app/scripts/_components/ScriptItems/InterFaces.tsx
index 99f855fad..d7ea148ae 100644
--- a/frontend/src/app/scripts/_components/ScriptItems/InterFaces.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItems/InterFaces.tsx
@@ -4,36 +4,16 @@ import { Script } from "@/lib/types";
import { cn } from "@/lib/utils";
import { ClipboardIcon } from "lucide-react";
-const CopyButton = ({
- label,
- value,
-}: {
- label: string;
- value: string | number;
-}) => (
-
- {value}
- handleCopy(label, String(value))}
- className="size-4 cursor-pointer"
- />
-
-);
-
export default function InterFaces({ item }: { item: Script }) {
return (
-
+
{item.interface_port !== null ? (
-
- {"Default Interface:"}
- {" "}
- Default Interface:
+
+ {item.interface_port}
+ handleCopy("default interface", String(item.interface_port))} className="size-4 cursor-pointer" />
+
) : null}
diff --git a/frontend/src/app/scripts/_components/VersionBadge.tsx b/frontend/src/app/scripts/_components/VersionBadge.tsx
new file mode 100644
index 000000000..712893d6c
--- /dev/null
+++ b/frontend/src/app/scripts/_components/VersionBadge.tsx
@@ -0,0 +1,13 @@
+import { AppVersion } from "@/lib/types";
+
+interface VersionBadgeProps {
+ version: AppVersion;
+}
+
+export function VersionBadge({ version }: VersionBadgeProps) {
+ return (
+
+ {version.version}
+
+ );
+}
diff --git a/frontend/src/app/scripts/page.tsx b/frontend/src/app/scripts/page.tsx
index a02f80b83..590b67358 100644
--- a/frontend/src/app/scripts/page.tsx
+++ b/frontend/src/app/scripts/page.tsx
@@ -2,7 +2,7 @@
export const dynamic = "force-static";
-import ScriptItem from "@/app/scripts/_components/ScriptItem";
+import { ScriptItem } from "@/app/scripts/_components/ScriptItem";
import { fetchCategories } from "@/lib/data";
import { Category, Script } from "@/lib/types";
import { Loader2 } from "lucide-react";
diff --git a/frontend/src/components/icons/resource-icons.tsx b/frontend/src/components/icons/resource-icons.tsx
new file mode 100644
index 000000000..981c36ffa
--- /dev/null
+++ b/frontend/src/components/icons/resource-icons.tsx
@@ -0,0 +1,48 @@
+export function CPUIcon() {
+ return (
+
+
+ );
+}
+
+export function RAMIcon() {
+ return (
+
+
+ );
+}
+
+export function HDDIcon() {
+ return (
+
+
+ );
+}
diff --git a/frontend/src/components/query-provider.tsx b/frontend/src/components/query-provider.tsx
new file mode 100644
index 000000000..0c2fe1275
--- /dev/null
+++ b/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
{children} ;
+}
diff --git a/frontend/src/hooks/useVersions.ts b/frontend/src/hooks/useVersions.ts
new file mode 100644
index 000000000..44404f4fa
--- /dev/null
+++ b/frontend/src/hooks/useVersions.ts
@@ -0,0 +1,21 @@
+"use client";
+
+import { fetchVersions } from "@/lib/data";
+import { AppVersion } from "@/lib/types";
+import { useQuery } from "@tanstack/react-query";
+
+export function useVersions() {
+ return useQuery
({
+ queryKey: ["versions"],
+ queryFn: async () => {
+ const fetchedVersions = await fetchVersions();
+ if (Array.isArray(fetchedVersions)) {
+ return fetchedVersions;
+ }
+ if (fetchedVersions && typeof fetchedVersions === "object") {
+ return [fetchedVersions];
+ }
+ return [];
+ },
+ });
+}
diff --git a/frontend/src/lib/utils/resource-utils.ts b/frontend/src/lib/utils/resource-utils.ts
new file mode 100644
index 000000000..25e096605
--- /dev/null
+++ b/frontend/src/lib/utils/resource-utils.ts
@@ -0,0 +1,7 @@
+export function getDisplayValueFromRAM(ram: number): string {
+ return ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`;
+}
+
+export function cleanSlug(slug: string): string {
+ return slug.replace(/[^a-z0-9]/gi, "").toLowerCase();
+}