Add nsfw handling. Add zustand for global store

src/app/(normal)/artworks/single/[id]/page.tsx

@@ -1,12 +1,13 @@
 import ArtworkMetaCard from "@/components/artworks/ArtworkMetaCard";
 import ArtworkTimelapseViewer from "@/components/artworks/ArtworkTimelapseViewer";
 import { ContextBackButton } from "@/components/artworks/ContextBackButton";
+import NsfwConsentDialog from "@/components/nsfw/NsfwConsentDialog";
+import NsfwImage from "@/components/nsfw/NsfwImage";
+import NsfwLink from "@/components/nsfw/NsfwLink";
 import { Button } from "@/components/ui/button";
 import { prisma } from "@/lib/prisma";
 import { cn } from "@/lib/utils";
 import { PlayCircle } from "lucide-react";
-import Image from "next/image";
-import Link from "next/link";
 
 export default async function SingleArtworkPage({
   params,
@@ -49,6 +50,7 @@ export default async function SingleArtworkPage({
 
   return (
     <div className="px-4 sm:px-8 py-4">
+      <NsfwConsentDialog hasNsfw={Boolean(artwork.nsfw)} />
       <div className="relative w-full min-h-10 flex items-center mb-4">
         <div className="z-10 hidden sm:block">
           <ContextBackButton />
@@ -69,16 +71,17 @@ export default async function SingleArtworkPage({
             className="relative w-full bg-muted items-center justify-center"
             style={{ aspectRatio: "4 / 3" }}
           >
-            <Link href={`/raw/${artwork.id}`}>
-              <Image
+            <NsfwLink href={`/raw/${artwork.id}`} nsfw={Boolean(artwork.nsfw)}>
+              <NsfwImage
                 src={`/api/image/resized/${artwork.file.fileKey}.webp`}
                 alt={artwork.altText || "Artwork"}
                 fill={!width || !height}
                 width={width}
                 height={height}
+                nsfw={Boolean(artwork.nsfw)}
                 className={cn("object-cover transition duration-300")}
               />
-            </Link>
+            </NsfwLink>
           </div>
         </div>
         {artwork.timelapse?.enabled ? (