fix api link and added hover effect

Author: HoomanDgtl

src/components/pricing-page/gpus/filter.tsx

@@ -156,7 +156,7 @@ export default function Filter({
           {options?.map((item) => (
             <div key={item.name} className="">
               <Select>
-                <SelectTrigger className="px-4">
+                <SelectTrigger className="px-4 hover:bg-gray-50 dark:hover:bg-darkGray">
                   <p className="text-s2 mr-2.5 font-medium text-foreground">
                     {item.name}
                   </p>

src/components/pricing-page/gpus/gpu-availability.tsx

@@ -1,3 +1,5 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
 const GpuAvailability = ({
   totalGpus,
   totalAvailableGpus,
@@ -12,35 +14,50 @@ const GpuAvailability = ({
   const availablePercentage = (totalAvailableGpus / totalGpus) * 100;
   return (
     <div className="flex flex-col gap-3">
-      <h1 className="  text-2xl !font-semibold">
-        GPU Pricing and Availability
-      </h1>
+      {isLoading ? (
+        <Skeleton className="h-9 w-64 dark:bg-darkGray" />
+      ) : (
+        <h1 className="text-2xl !font-semibold">
+          GPU Pricing and Availability
+        </h1>
+      )}
       <div className="flex gap-1">
-        <div className="bg-lightGray border-darkGrayBorder flex items-center  gap-1.5 rounded-full border px-4 py-1 dark:border-defaultBorder dark:bg-background2 ">
-          <p className="text-darkGrayText text-xs font-medium dark:text-para">
-            Total GPUs:
-          </p>
-          <p className="text-sm font-semibold text-foreground">{totalGpus}</p>
-        </div>
-        <div className="bg-lightGray border-darkGrayBorder  flex items-center gap-1.5 rounded-full border px-4 py-1 dark:border-defaultBorder dark:bg-background2 ">
-          <div className="flex items-center gap-1.5">
-            <p className="text-darkGrayText  text-xs font-medium dark:text-para">
-              Available GPUs:
-            </p>
-            <p className="text-sm font-semibold text-foreground">
-              {availablePercentage.toFixed(2)}%
-            </p>
-          </div>
-          <div className="bg-darkGrayBorder h-full w-[1.5px]" />
-          <div className="flex items-center gap-1.5">
-            <p className="text-darkGrayText text-xs font-medium dark:text-para">
-              Used:
-            </p>
-            <p className="text-sm font-semibold text-foreground">
-              {usedPercentage.toFixed(2)}%
-            </p>
-          </div>
-        </div>
+        {isLoading ? (
+          <>
+            <Skeleton className="h-8 w-32 rounded-full dark:bg-darkGray" />
+            <Skeleton className="h-8 w-64 rounded-full dark:bg-darkGray" />
+          </>
+        ) : (
+          <>
+            <div className="flex items-center gap-1.5 rounded-full  border border-darkGrayBorder bg-lightGray px-4 py-1 dark:border-defaultBorder dark:bg-background2 ">
+              <p className="text-xs font-medium text-darkGrayText dark:text-para">
+                Total GPUs:
+              </p>
+              <p className="text-sm font-semibold text-foreground">
+                {totalGpus}
+              </p>
+            </div>
+            <div className="flex items-center  gap-1.5 rounded-full border border-darkGrayBorder bg-lightGray px-4 py-1 dark:border-defaultBorder dark:bg-background2 ">
+              <div className="flex items-center gap-1.5">
+                <p className="text-xs  font-medium text-darkGrayText dark:text-para">
+                  Available GPUs:
+                </p>
+                <p className="text-sm font-semibold text-foreground">
+                  {availablePercentage.toFixed(2)}%
+                </p>
+              </div>
+              <div className="h-full w-[1.5px] bg-darkGrayBorder" />
+              <div className="flex items-center gap-1.5">
+                <p className="text-xs font-medium text-darkGrayText dark:text-para">
+                  Used:
+                </p>
+                <p className="text-sm font-semibold text-foreground">
+                  {usedPercentage.toFixed(2)}%
+                </p>
+              </div>
+            </div>
+          </>
+        )}
       </div>
     </div>
   );

src/utils/api.ts

@@ -1 +1 @@
-export const gpus = "https://api.cloudmos.io/internal/gpu-prices";
+export const gpus = "https://console-api.akash.network/internal/gpu-prices";