Add border to variant two

src/actions/portfolio/getJustifiedImages.ts

@@ -20,7 +20,7 @@ export async function getJustifiedImages() {
       const variant = img.variants.find((v) => v.type === "resized");
       if (!variant || !variant.width || !variant.height) return null;
 
-      const bg = img.colors.find((c) => c.type === "vibrant")?.color.hex ?? "#e5e7eb";
+      const bg = img.colors.find((c) => c.type === "Vibrant")?.color.hex ?? "#e5e7eb";
 
       return {
         id: img.id,

src/app/globals.css

@@ -172,6 +172,10 @@
   @apply line-through text-muted-foreground;
 }
 
+div:hover {
+  border-color: var(--hover-border-color);
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;

src/components/portfolio/ImageCard.tsx

@@ -3,6 +3,7 @@
 import type { Color, ImageColor, ImageVariant, PortfolioImage } from "@/generated/prisma";
 import { cn } from "@/lib/utils";
 import Image from "next/image";
+import Link from "next/link";
 
 // ---------- Type Definitions ----------
 
@@ -53,34 +54,43 @@ export function ImageCard(props: ImageCardProps) {
       ? `/api/image/thumbnail/${props.image.fileKey}.webp`
       : props.image.url;
 
+  console.log(props.image);
+
   return (
-    <div
-      className={cn(
-        "overflow-hidden",
-        isSquare && "aspect-square shadow-sm hover:scale-[1.01] transition-transform",
-        isMosaic && "w-full h-full"
-      )}
-      style={{ backgroundColor }}
-    >
+    <Link href={`/portfolio/${props.image.id}`}>
       <div
         className={cn(
-          "relative w-full h-full",
-          isSquare && "flex items-center justify-center"
+          "overflow-hidden transition-all duration-100",
+          isSquare && "aspect-square shadow-sm hover:scale-[1.01] transition-transform",
+          isMosaic && "w-full h-full",
+          "hover:border-2 border-transparent"
         )}
+        style={{
+          backgroundColor,
+          '--tw-border-opacity': 1,
+          '--hover-border-color': backgroundColor,
+        } as React.CSSProperties}
       >
-        <Image
-          src={src}
-          alt={altText}
-          fill={isMosaic}
-          width={isSquare ? 400 : undefined}
-          height={isSquare ? 400 : undefined}
+        <div
           className={cn(
-            isSquare && "object-contain max-w-full max-h-full",
-            isMosaic && "object-cover"
+            "relative w-full h-full",
+            isSquare && "flex items-center justify-center"
           )}
-          loading="lazy"
-        />
+        >
+          <Image
+            src={src}
+            alt={altText}
+            fill={isMosaic}
+            width={isSquare ? 400 : undefined}
+            height={isSquare ? 400 : undefined}
+            className={cn(
+              isSquare && "object-contain max-w-full max-h-full",
+              isMosaic && "object-cover"
+            )}
+            loading="lazy"
+          />
+        </div>
       </div>
-    </div>
+    </Link>
   );
 }