Merge pull request #329 from Blobscan/feat/add-storage-badges-highlight

fix(web): add highlight effect to blob storage badges

.changeset/long-bears-remember.md

@@ -0,0 +1,5 @@
+---
+"@blobscan/web": patch
+---
+
+Added highlight effect to blob storage badges

apps/web/src/components/Badges/Badge.tsx

@@ -45,7 +45,7 @@ export const Badge: React.FC<BadgeProps> = ({
 
   return (
     <div
-      className={`flex w-fit items-center rounded-full px-2.5 ${
+      className={`flex w-fit items-center rounded-full px-2.5 transition-colors ${
         containerStyles ?? "py-0.5"
       } ${className}`}
     >

apps/web/src/components/Badges/StorageBadge.tsx

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import type { FC, HTMLAttributes, ReactNode } from "react";
 import React from "react";
 import NextLink from "next/link";
 
@@ -12,34 +12,37 @@ import type { Size } from "~/types";
 import { capitalize } from "~/utils";
 import { Badge } from "./Badge";
 
-const buildBlobDataRef = (storage: BlobStorage, dataRef: string) => {
-  switch (storage) {
-    case "GOOGLE":
-      return `https://storage.googleapis.com/${env.NEXT_PUBLIC_GOOGLE_STORAGE_BUCKET_NAME}/${dataRef}`;
-    case "SWARM":
-      return `https://gateway.ethswarm.org/access/${dataRef}`;
-    case "POSTGRES":
-      return "#";
-  }
+type StorageConfig = {
+  icon: ReactNode;
+  style: HTMLAttributes<HTMLDivElement>["className"];
+  buildDownloadUrl(blobReference: string): string;
 };
 
-const STORAGE_CONFIG: Record<BlobStorage, { icon: ReactNode; style: string }> =
-  {
-    GOOGLE: {
-      icon: <GoogleIcon />,
-      style:
-        "bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-300",
+const STORAGE_CONFIGS: Record<BlobStorage, StorageConfig> = {
+  GOOGLE: {
+    icon: <GoogleIcon />,
+    style:
+      "bg-slate-100 hover:bg-slate-200 text-slate-800 hover:text-slate-900 dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-slate-600 dark:hover:text-slate-200",
+    buildDownloadUrl(blobReference) {
+      return `https://storage.googleapis.com/${env.NEXT_PUBLIC_GOOGLE_STORAGE_BUCKET_NAME}/${blobReference}`;
     },
-    SWARM: {
-      icon: <SwarmIcon />,
-      style:
-        "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300",
+  },
+  SWARM: {
+    icon: <SwarmIcon />,
+    style:
+      "bg-orange-100 hover:bg-orange-200 text-orange-800 hover:text-orange-900 dark:bg-orange-900 dark:text-orange-300 dark:hover:bg-orange-800 dark:hover:text-orange-200",
+    buildDownloadUrl(blobReference) {
+      return `https://gateway.ethswarm.org/access/${blobReference}`;
     },
-    POSTGRES: {
-      icon: <PostgresIcon />,
-      style: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
+  },
+  POSTGRES: {
+    icon: <PostgresIcon />,
+    style: "bg-blue-100 text-blue-800 dark:text-blue-300 hover:bg-blue-200",
+    buildDownloadUrl(_) {
+      return "#";
     },
-  };
+  },
+};
 
 type StorageBadgeProps = {
   size?: Size;
@@ -52,11 +55,14 @@ export const StorageBadge: FC<StorageBadgeProps> = ({
   storage,
   dataRef,
 }) => {
-  const { icon, style } = STORAGE_CONFIG[storage];
-  const ref = buildBlobDataRef(storage, dataRef);
+  const { icon, style, buildDownloadUrl } = STORAGE_CONFIGS[storage];
+  const downloadUrl = buildDownloadUrl(dataRef);
 
   return (
-    <NextLink href={ref} target={ref !== "#" ? "_blank" : "_self"}>
+    <NextLink
+      href={downloadUrl}
+      target={downloadUrl !== "#" ? "_blank" : "_self"}
+    >
       <Badge
         className={style}
         icon={icon}