From dc92d9b428a06578a330e1a351998af2bd5b0e2c Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Tue, 4 Jun 2024 21:03:57 +0200
Subject: [PATCH] Update cache expiry time to 24 hours in page.tsx. Changed
 styling of script to be more uniform.

---
 app/scripts/page.tsx         |  2 +-
 components/CacheControls.tsx | 53 ++++++++++++++++++------------------
 components/Navbar.tsx        |  6 ++--
 components/Script.tsx        | 21 +++++++-------
 components/ui/button.tsx     |  1 +
 5 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/app/scripts/page.tsx b/app/scripts/page.tsx
index 6685923..45fa5de 100644
--- a/app/scripts/page.tsx
+++ b/app/scripts/page.tsx
@@ -30,7 +30,7 @@ export default function Page() {
 
           if (diffInMinutes < 30) {
             setLinks(JSON.parse(cachedLinks));
-            setCacheExpiryTime(new Date(Number(cacheTime) + 30 * 60 * 1000));
+            setCacheExpiryTime(new Date(Number(cacheTime) + 1440 * 60 * 1000));
             setIsLoading(false);
             return;
           }
diff --git a/components/CacheControls.tsx b/components/CacheControls.tsx
index b9cf6fe..410ca50 100644
--- a/components/CacheControls.tsx
+++ b/components/CacheControls.tsx
@@ -25,7 +25,8 @@ const CacheControls: React.FC<CacheControlsProps> = ({
             </p>
             {cacheExpiryTime && (
               <p className="text-xs text-muted-foreground">
-                Cache will expire automatically at{" "}
+                Cache will expire automatically on{" "}
+                {cacheExpiryTime.toLocaleDateString()} at{" "}
                 {cacheExpiryTime.toLocaleTimeString()}
               </p>
             )}
@@ -36,31 +37,31 @@ const CacheControls: React.FC<CacheControlsProps> = ({
           </p>
         )}
       </div>
-<div className="flex justify-center space-x-2 py-4">
-  {isCacheEnabled ? (
-    <>
-      <Button variant="outline" onClick={handleForceUpdate}>
-        <span className="flex items-center space-x-2">
-          <DatabaseBackup className="w-4 h-4"/>
-          <span>Reload via API</span>
-        </span>
-      </Button>
-      <Button variant="outline" onClick={toggleCache}>
-        <span className="flex items-center space-x-2">
-          <Database className="w-4 h-4"/>
-          <span>Disable Cache</span>
-        </span>
-      </Button>
-    </>
-  ) : (
-    <Button variant="outline" onClick={toggleCache}>
-      <span className="flex items-center space-x-2">
-        <DatabaseZap className="w-4 h-4"/>
-        <span>Enable Cache</span>
-      </span>
-    </Button>
-  )}
-</div>
+      <div className="flex justify-center space-x-2 py-4">
+        {isCacheEnabled ? (
+          <>
+            <Button variant="outline" onClick={handleForceUpdate}>
+              <span className="flex items-center space-x-2">
+                <DatabaseBackup className="h-4 w-4" />
+                <span>Reload via API</span>
+              </span>
+            </Button>
+            <Button variant="outline" onClick={toggleCache}>
+              <span className="flex items-center space-x-2">
+                <Database className="h-4 w-4" />
+                <span>Disable Cache</span>
+              </span>
+            </Button>
+          </>
+        ) : (
+          <Button variant="outline" onClick={toggleCache}>
+            <span className="flex items-center space-x-2">
+              <DatabaseZap className="h-4 w-4" />
+              <span>Enable Cache</span>
+            </span>
+          </Button>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 0ea3218..05ef4b1 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -113,13 +113,15 @@ function Navbar() {
         }`}
       >
         <div className="flex h-20 w-full max-w-7xl flex-row-reverse items-center justify-between sm:flex-row">
-          <h2 className="font-semibold " onClick={setVisited}>
+          <h2 className="cursor-pointer font-semibold" onClick={setVisited}>
             <Link
               href="/"
               className=" flex flex-row-reverse items-center gap-2 sm:flex-row"
             >
               <Image height={18} width={18} alt="logo" src={logo} />
-              <span className="">Proxmox VE Helper-Scripts</span>
+              <span>
+                Proxmox VE Helper-Scripts
+              </span>
             </Link>
           </h2>
           <div className="flex items-center sm:hidden">
diff --git a/components/Script.tsx b/components/Script.tsx
index 70782c7..5c854d7 100644
--- a/components/Script.tsx
+++ b/components/Script.tsx
@@ -132,7 +132,7 @@ function ScriptItem({
         return (
           <Button
             variant={"secondary"}
-            size={"sm"}
+            size={"null"}
             key={index}
             onClick={() => handleCopy("command", part)}
           >
@@ -178,8 +178,8 @@ function ScriptItem({
                 <h2 className="text-lg font-semibold">Selected Script</h2>
                 <X onClick={closeScript} className="cursor-pointer" />
               </div>
-              <div className="mt-2 rounded-lg border p-4 bg-accent/20">
-                <div className="mt-4 flex justify-between">
+              <div className="mt-2 rounded-lg border bg-accent/20 p-4">
+                <div className="flex justify-between">
                   <div className="flex">
                     <Image
                       className="h-32 w-32 rounded-lg bg-accent/60 object-contain p-3"
@@ -269,7 +269,7 @@ function ScriptItem({
                         </div>
                       )}
                     </div>
-                    <div className="flex justify-end gap-2">
+                    <div className="flex justify-end gap-2 flex-wrap">
                       {item.website && (
                         <Button variant="outline" asChild>
                           <Link target="_blank" href={item.website}>
@@ -312,8 +312,9 @@ function ScriptItem({
                     </div>
                   </div>
                 </div>
+                <Separator className="mt-4" />
                 <div>
-                  <div className="mt-5">
+                  <div className="mt-4">
                     <h2 className="max-w-prose text-lg font-semibold">
                       Description
                     </h2>
@@ -321,19 +322,19 @@ function ScriptItem({
                       {descriptionCodeBlock(item.description)}
                     </p>
                     {item.alert1 && (
-                      <div className="mt-4 flex flex-col gap-1">
-                        <p className="flex items-center gap-2 text-sm">
+                      <div className="mt-4 flex flex-col gap-2">
+                        <p className="inline-flex items-center gap-2 rounded-lg border border-red-500/25 bg-destructive/25 p-2 text-sm">
                           <Info className="h-4 min-h-4 w-4 min-w-4" />
                           {descriptionCodeBlock(item.alert1)}
                         </p>
                         {item.alert2 && (
-                          <p className="flex  items-center gap-2 text-sm">
+                          <p className="inline-flex items-center gap-2 rounded-lg border border-red-500/25 bg-destructive/25 p-2 text-sm">
                             <Info className="min-w-42 h-4 min-h-4 w-4" />
                             {descriptionCodeBlock(item.alert2)}
                           </p>
                         )}
                         {item.alert3 && (
-                          <p className="flex items-center gap-2 text-sm">
+                          <p className="inline-flex items-center gap-2 rounded-lg border border-red-500/25 bg-destructive/25 p-2 text-sm">
                             <Info className="h-4 min-h-4 w-4 min-w-4" />
                             {descriptionCodeBlock(item.alert3)}
                           </p>
@@ -342,7 +343,7 @@ function ScriptItem({
                     )}
                   </div>
 
-                  <div className="mt-6 rounded-lg border bg-accent/50 p-4">
+                  <div className="mt-4 rounded-lg border bg-accent/50 p-4">
                     <h2 className="text-lg font-semibold">
                       How to {item.item_type ? "install" : "use"}
                     </h2>
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index b51f13b..ee0ba1d 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -24,6 +24,7 @@ const buttonVariants = cva(
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",
+        null: "py-1 px-3 rouded-xs"
       },
     },
     defaultVariants: {