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,14 +54,22 @@ export function ImageCard(props: ImageCardProps) {
       ? `/api/image/thumbnail/${props.image.fileKey}.webp`
       : props.image.url;
 
+  console.log(props.image);
+
   return (
+    <Link href={`/portfolio/${props.image.id}`}>
       <div
         className={cn(
-        "overflow-hidden",
+          "overflow-hidden transition-all duration-100",
           isSquare && "aspect-square shadow-sm hover:scale-[1.01] transition-transform",
-        isMosaic && "w-full h-full"
+          isMosaic && "w-full h-full",
+          "hover:border-2 border-transparent"
         )}
-      style={{ backgroundColor }}
+        style={{
+          backgroundColor,
+          '--tw-border-opacity': 1,
+          '--hover-border-color': backgroundColor,
+        } as React.CSSProperties}
       >
         <div
           className={cn(
@@ -82,5 +91,6 @@ export function ImageCard(props: ImageCardProps) {
           />
         </div>
       </div>
+    </Link>
   );
 }