refactor: use class list

Signed-off-by: Adam Setch <adam.setch@outlook.com>

Author: setchy

src/components/Footer.astro

@@ -8,9 +8,10 @@ const isHomepage = currentPathname === "/";
 ---
 
 <div
-  class={`bg-gray-800 text-white text-sm py-10 px-3 ${
-    isHomepage ? 'mt-0' : 'mt-12'
-  }`}
+  class:list={[
+    "bg-gray-800 text-white text-sm py-10 px-3",
+    isHomepage ? "mt-0" : "mt-12",
+  ]}
 >
   <div class="container mx-auto flex flex-col items-center text-center">
     <a

src/components/LatestRelease.astro

@@ -105,7 +105,11 @@ const { downloadLinks, version, releaseDate } = await loadInitialData();
           {downloadLinks.primary.map((item) => (
             <a
               href={item.url}
-              class={`flex items-center mb-3 px-4 py-3 font-semibold text-white rounded-md bg-green-700 hover:bg-green-800 hover:text-white mr-4`}
+              class:list={[
+                "flex items-center mb-3 px-4 py-3 mr-4",
+                "font-semibold text-white hover:text-white",
+                "rounded-md bg-green-700 hover:bg-green-800 ",
+              ]}
             >
               <div class="flex flex-row gap-2 items-center">
                 <Icon name="line-md:cloud-alt-download-filled" size={24} />
@@ -115,20 +119,22 @@ const { downloadLinks, version, releaseDate } = await loadInitialData();
           ))}
         </div>
         <div class="w-80">
-          <p>Latest version: <a href={URLs.GITHUB.LATEST_RELEASE}>{version}</a></p>
+          <p>
+            Latest version: <a href={URLs.GITHUB.LATEST_RELEASE}>{version}</a>
+          </p>
           <p class="mt-1">Released on: {releaseDate}</p>
           {downloadLinks.alt.length > 0 && (
             <p class="mt-1">
               Also available on:
-                <ul class="list-disc list-inside ml-4">
-                  {downloadLinks.alt.map((platform) => (
-                    <li>
-                      <a href={platform.url || URLs.GITHUB.LATEST_RELEASE}>
-                        {platform.name}
-                      </a>
-                    </li>
-                  ))}
-                </ul>
+              <ul class="list-disc list-inside ml-4">
+                {downloadLinks.alt.map((platform) => (
+                  <li>
+                    <a href={platform.url || URLs.GITHUB.LATEST_RELEASE}>
+                      {platform.name}
+                    </a>
+                  </li>
+                ))}
+              </ul>
             </p>
           )}
         </div>

src/components/Navbar.astro

@@ -25,11 +25,13 @@ const isHomepage = currentPathname === "/";
               <li>
                 <a
                   href={item.path}
-                  class={`py-1.5 lg:py-2 px-2 lg:px-3 font-light ${
+                  class:list={[
+                    "py-1.5 lg:py-2 px-2 lg:px-3",
+                    "text-white font-light hover:text-gray-300",
                     currentPathname === item.path
                       ? "border rounded-lg border-white text-white"
-                      : "text-white"
-                  } hover:text-gray-300`}
+                      : "",
+                  ]}
                 >
                   {item.name}
                 </a>
@@ -39,7 +41,7 @@ const isHomepage = currentPathname === "/";
 
           <li>
             <GitHubRepo />
-          </li> 
+          </li>
         </ul>
       </div>
     </div>