Fixes

src/components/images/GlowingImageWithToggle.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { Color, ImageColor, ImageVariant } from "@/generated/prisma";
+import Link from "next/link";
 import { useState } from "react";
 import { Label } from "../ui/label";
 import { Switch } from "../ui/switch";
@@ -12,22 +13,26 @@ type Props = {
   alt: string;
   src: string;
   nsfw: boolean;
+  imageId: string;
 }
 
-export default function GlowingImageWithToggle({ variant, colors, alt, src, nsfw }: Props) {
+export default function GlowingImageWithToggle({ variant, colors, alt, src, nsfw, imageId }: Props) {
   const [animate, setAnimate] = useState(true);
   const [revealed, setRevealed] = useState(!nsfw)
 
   return (
     <div className="relative w-full max-w-fit">
-      <GlowingImageBorder
-        alt={alt}
-        variant={variant}
-        colors={colors}
-        src={src}
-        animate={animate}
-        revealed={revealed}
-      />
+
+      <Link href={`/raw/${imageId}`} passHref>
+        <GlowingImageBorder
+          alt={alt}
+          variant={variant}
+          colors={colors}
+          src={src}
+          animate={animate}
+          revealed={revealed}
+        />
+      </Link>
 
       <div className="flex flex-col items-center gap-4 pt-8">
         <div className="flex items-center gap-2">
@@ -36,14 +41,16 @@ export default function GlowingImageWithToggle({ variant, colors, alt, src, nsfw
         </div>
       </div>
 
-      {nsfw && (
-        <div className="flex flex-col items-center gap-4 pt-8">
-          <div className="flex items-center gap-2">
-            <Switch id="animate" checked={revealed} onCheckedChange={setRevealed} />
-            <Label htmlFor="animate">Reveal NSFW</Label>
+      {
+        nsfw && (
+          <div className="flex flex-col items-center gap-4 pt-8">
+            <div className="flex items-center gap-2">
+              <Switch id="animate" checked={revealed} onCheckedChange={setRevealed} />
+              <Label htmlFor="animate">Reveal NSFW</Label>
+            </div>
           </div>
-        </div>
-      )}
-    </div>
+        )
+      }
+    </div >
   );
 }