Add timelapse to single image

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

@@ -1,7 +1,10 @@
 import ArtworkMetaCard from "@/components/artworks/ArtworkMetaCard";
+import ArtworkTimelapseViewer from "@/components/artworks/ArtworkTimelapseViewer";
 import { ContextBackButton } from "@/components/artworks/ContextBackButton";
+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";
 
@@ -19,7 +22,8 @@ export default async function SingleArtworkPage({ params }: { params: { id: stri
       categories: true,
       colors: { include: { color: true } },
       tags: true,
-      variants: true
+      variants: true,
+      timelapse: true,
     }
   })
 
@@ -62,6 +66,20 @@ export default async function SingleArtworkPage({ params }: { params: { id: stri
             </Link>
           </div>
         </div>
+        {artwork.timelapse?.enabled ? (
+          <div className="flex justify-center">
+            <ArtworkTimelapseViewer
+              timelapse={artwork.timelapse}
+              artworkName={artwork.name}
+              trigger={
+                <Button size="lg" className="gap-2">
+                  <PlayCircle className="h-5 w-5" />
+                  Watch timelapse
+                </Button>
+              }
+            />
+          </div>
+        ) : null}
         <div
           className="rounded-lg"
           style={{