fix: wip

packages/ui/components/call-to-action.tsx

@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Link } from 'react-router';
 
 import { Button } from '../primitives/button';
 import { Card, CardContent } from '../primitives/card';
@@ -25,7 +25,7 @@ export const CallToAction = ({ className, utmSource = 'generic-cta' }: CallToAct
           size="lg"
           asChild
         >
-          <Link href={`https://app.documenso.com/signup?utm_source=${utmSource}`} target="_blank">
+          <Link to={`https://app.documenso.com/signup?utm_source=${utmSource}`} target="_blank">
             Get started
           </Link>
         </Button>

packages/ui/components/document/document-dialog.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { useState } from 'react';
 
 import type { DocumentData } from '@prisma/client';
@@ -7,17 +5,18 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
 
 import { cn } from '../../lib/utils';
-import { Dialog, DialogOverlay, DialogPortal } from '../../primitives/dialog';
+import { Dialog, DialogOverlay, DialogPortal, DialogTrigger } from '../../primitives/dialog';
 import { LazyPDFViewerNoLoader } from '../../primitives/lazy-pdf-viewer';
 
 export type DocumentDialogProps = {
+  trigger?: React.ReactNode;
   documentData: DocumentData;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
 /**
  * A dialog which renders the provided document.
  */
-export default function DocumentDialog({ documentData, ...props }: DocumentDialogProps) {
+export default function DocumentDialog({ trigger, documentData, ...props }: DocumentDialogProps) {
   const [documentLoaded, setDocumentLoaded] = useState(false);
 
   const onDocumentLoad = () => {
@@ -29,6 +28,12 @@ export default function DocumentDialog({ documentData, ...props }: DocumentDialo
       <DialogPortal>
         <DialogOverlay className="bg-black/80" />
 
+        {trigger && (
+          <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+            {trigger}
+          </DialogTrigger>
+        )}
+
         <DialogPrimitive.Content
           className={cn(
             'animate-in data-[state=open]:fade-in-90 sm:zoom-in-90 pointer-events-none fixed z-50 h-screen w-screen overflow-y-auto px-2 py-14 opacity-0 transition-opacity lg:py-32',

packages/ui/components/document/document-download-button.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { HTMLAttributes } from 'react';
 import { useState } from 'react';
 

packages/ui/components/signing-card.tsx

@@ -1,10 +1,5 @@
-'use client';
-
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-import type { StaticImageData } from 'next/image';
-import Image from 'next/image';
-
 import type { Signature } from '@prisma/client';
 import { animate, motion, useMotionTemplate, useMotionValue, useTransform } from 'framer-motion';
 import { P, match } from 'ts-pattern';
@@ -16,7 +11,7 @@ export type SigningCardProps = {
   className?: string;
   name: string;
   signature?: Signature;
-  signingCelebrationImage?: StaticImageData;
+  signingCelebrationImage?: string;
 };
 
 /**
@@ -212,7 +207,7 @@ const SigningCardContent = ({ className, name, signature }: SigningCardContentPr
 };
 
 type SigningCardImageProps = {
-  signingCelebrationImage: StaticImageData;
+  signingCelebrationImage: string;
 };
 
 const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) => {
@@ -232,7 +227,7 @@ const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) =>
         duration: 0.5,
       }}
     >
-      <Image
+      <img
         src={signingCelebrationImage}
         alt="background pattern"
         className="w-full dark:brightness-150 dark:contrast-[70%] dark:invert dark:sepia"
@@ -240,7 +235,6 @@ const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) =>
           mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
           WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
         }}
-        priority
       />
     </motion.div>
   );