Refactor Buttons component to use a ButtonLink for cleaner code, simplifying the source URL generation and layout (#371)

* Refactor Buttons component to use a ButtonLink for cleaner code, simplifying the source URL generation and layout

* Refactor DefaultPassword component to simplify credential handling and enhance code readability with map function

* Refactor DefaultSettings component to improve resource display logic and enhance readability using a new ResourceDisplay subcomponent

frontend/src/app/scripts/_components/ScriptItems/Buttons.tsx

@@ -5,45 +5,53 @@ import { BookOpenText, Code, Globe } from "lucide-react";
 import Link from "next/link";
 
 const generateSourceUrl = (slug: string, type: string) => {
-  if (type === "ct") {
+  const baseUrl = `https://raw.githubusercontent.com/community-scripts/${basePath}/main`;
-    return `https://raw.githubusercontent.com/community-scripts/${basePath}/main/install/${slug}-install.sh`;
+  return type === "ct"
-  } else {
+    ? `${baseUrl}/install/${slug}-install.sh`
-    return `https://raw.githubusercontent.com/community-scripts/${basePath}/main/${type}/${slug}.sh`;
+    : `${baseUrl}/${type}/${slug}.sh`;
-  }
 };
 
+interface ButtonLinkProps {
+  href: string;
+  icon: React.ReactNode;
+  text: string;
+}
+
+const ButtonLink = ({ href, icon, text }: ButtonLinkProps) => (
+  <Button variant="secondary" asChild>
+    <Link target="_blank" href={href}>
+      <span className="flex items-center gap-2">
+        {icon}
+        {text}
+      </span>
+    </Link>
+  </Button>
+);
+
 export default function Buttons({ item }: { item: Script }) {
+  const buttons = [
+    item.website && {
+      href: item.website,
+      icon: <Globe className="h-4 w-4" />,
+      text: "Website",
+    },
+    item.documentation && {
+      href: item.documentation,
+      icon: <BookOpenText className="h-4 w-4" />,
+      text: "Documentation",
+    },
+    {
+      href: generateSourceUrl(item.slug, item.type),
+      icon: <Code className="h-4 w-4" />,
+      text: "Source Code",
+    },
+  ].filter(Boolean) as ButtonLinkProps[];
+
   return (
     <div className="flex flex-wrap justify-end gap-2">
-      {item.website && (
+      {buttons.map((props, index) => (
-        <Button variant="secondary" asChild>
+        <ButtonLink key={index} {...props} />
-          <Link target="_blank" href={item.website}>
+      ))}
-            <span className="flex items-center gap-2">
-              <Globe className="h-4 w-4" /> Website
-            </span>
-          </Link>
-        </Button>
-      )}
-      {item.documentation && (
-        <Button variant="secondary" asChild>
-          <Link target="_blank" href={item.documentation}>
-            <span className="flex items-center gap-2">
-              <BookOpenText className="h-4 w-4" />
-              Documentation
-            </span>
-          </Link>
-        </Button>
-      )}
-      {
-        <Button variant="secondary" asChild>
-          <Link target="_blank" href={generateSourceUrl(item.slug, item.type)}>
-            <span className="flex items-center gap-2">
-              <Code className="h-4 w-4" />
-              Source Code
-            </span>
-          </Link>
-        </Button>
-      }
     </div>
   );
 }

frontend/src/app/scripts/_components/ScriptItems/DefaultPassword.tsx

@@ -4,55 +4,39 @@ import { Separator } from "@/components/ui/separator";
 import { Script } from "@/lib/types";
 
 export default function DefaultPassword({ item }: { item: Script }) {
-  const hasDefaultLogin =
+  const { username, password } = item.default_credentials;
-    item.default_credentials.username && item.default_credentials.password;
+  const hasDefaultLogin = username && password;
+
+  if (!hasDefaultLogin) return null;
+
+  const copyCredential = (type: "username" | "password") => {
+    handleCopy(type, item.default_credentials[type] ?? "");
+  };
 
   return (
-    <div>
-      {hasDefaultLogin && (
     <div className="mt-4 rounded-lg border bg-accent/50">
       <div className="flex gap-3 px-4 py-2">
         <h2 className="text-lg font-semibold">Default Login Credentials</h2>
       </div>
-          <Separator className="w-full"></Separator>
+      <Separator className="w-full" />
       <div className="flex flex-col gap-2 p-4">
         <p className="mb-2 text-sm">
-              You can use the following credentials to login to the {""}
+          You can use the following credentials to login to the {item.name}{" "}
-              {item.name} {item.type}.
+          {item.type}.
         </p>
-            <div className="text-sm">
+        {["username", "password"].map((type) => (
-              Username:{" "}
+          <div key={type} className="text-sm">
+            {type.charAt(0).toUpperCase() + type.slice(1)}:{" "}
             <Button
-                variant={"secondary"}
+              variant="secondary"
-                size={"null"}
+              size="null"
-                onClick={() =>
+              onClick={() => copyCredential(type as "username" | "password")}
-                  handleCopy(
-                    "username",
-                    item.default_credentials.username ?? "",
-                  )
-                }
             >
-                {item.default_credentials.username}
+              {item.default_credentials[type as "username" | "password"]}
             </Button>
           </div>
-            <div className="text-sm">
+        ))}
-              Password:{" "}
-              <Button
-                variant={"secondary"}
-                size={"null"}
-                onClick={() =>
-                  handleCopy(
-                    "password",
-                    item.default_credentials.password ?? "",
-                  )
-                }
-              >
-                {item.default_credentials.password}
-              </Button>
       </div>
     </div>
-        </div>
-      )}
-    </div>
   );
 }

frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx

@@ -1,56 +1,50 @@
 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 ResourceDisplay = ({
+    settings,
+    title,
+  }: {
+    settings: (typeof item.install_methods)[0];
+    title: string;
+  }) => {
+    const { cpu, ram, hdd } = settings.resources;
+    return (
+      <div>
+        <h2 className="text-md font-semibold">{title}</h2>
+        <p className="text-sm text-muted-foreground">CPU: {cpu}vCPU</p>
+        <p className="text-sm text-muted-foreground">
+          RAM: {getDisplayValueFromRAM(ram ?? 0)}
+        </p>
+        <p className="text-sm text-muted-foreground">HDD: {hdd}GB</p>
+      </div>
+    );
+  };
+
   const defaultSettings = item.install_methods.find(
     (method) => method.type === "default",
   );
-
-  const defaultSettingsAvailable =
-    defaultSettings?.resources.cpu ||
-    defaultSettings?.resources.ram ||
-    defaultSettings?.resources.hdd;
-
   const defaultAlpineSettings = item.install_methods.find(
     (method) => method.type === "alpine",
   );
 
-  const getDisplayValueFromRAM = (ram: number) => {
+  const hasDefaultSettings =
-    if (ram >= 1024) {
+    defaultSettings?.resources &&
-      return (ram / 1024).toFixed(0) + "GB";
+    Object.values(defaultSettings.resources).some(Boolean);
-    }
-    return ram + "MB";
-  };
 
   return (
     <>
-      {defaultSettingsAvailable && (
+      {hasDefaultSettings && (
-        <div>
+        <ResourceDisplay settings={defaultSettings} title="Default settings" />
-          <h2 className="text-md font-semibold">Default settings</h2>
-          <p className="text-sm text-muted-foreground">
-            CPU: {defaultSettings?.resources.cpu}vCPU
-          </p>
-          <p className="text-sm text-muted-foreground">
-            RAM: {getDisplayValueFromRAM(defaultSettings?.resources.ram ?? 0)}
-          </p>
-          <p className="text-sm text-muted-foreground">
-            HDD: {defaultSettings?.resources.hdd}GB
-          </p>
-        </div>
       )}
       {defaultAlpineSettings && (
-        <div>
+        <ResourceDisplay
-          <h2 className="text-md font-semibold">Default Alpine settings</h2>
+          settings={defaultAlpineSettings}
-          <p className="text-sm text-muted-foreground">
+          title="Default Alpine settings"
-            CPU: {defaultAlpineSettings?.resources.cpu}vCPU
+        />
-          </p>
-          <p className="text-sm text-muted-foreground">
-            RAM:{" "}
-            {getDisplayValueFromRAM(defaultAlpineSettings?.resources.ram ?? 0)}
-          </p>
-          <p className="text-sm text-muted-foreground">
-            HDD: {defaultAlpineSettings?.resources.hdd}GB
-          </p>
-        </div>
       )}
     </>
   );