feat: stack recipients avatars on dashboard

apps/web/src/components/(dashboard)/avatar/index.tsx

@@ -0,0 +1,36 @@
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+
+export type StackAvatarProps = {
+  first?: boolean;
+  zIndex?: string;
+  fallbackText?: string;
+  type: 'unsigned' | 'waiting' | 'completed';
+};
+
+export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarProps) => {
+  let classes = '';
+  switch (type) {
+    case 'unsigned':
+      classes = 'bg-dawn-400 text-dawn-900';
+      break;
+    case 'waiting':
+      classes = 'bg-water text-water-700';
+      break;
+    case 'completed':
+      classes = 'bg-documenso-200 text-documenso-800';
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <Avatar
+      className={`
+        ${zIndex && `z-${zIndex}`} 
+        ${!first && '-ml-3'} 
+        h-10 w-10 border-2 border-solid border-white `}
+    >
+      <AvatarFallback className={classes}>{fallbackText ?? 'UK'}</AvatarFallback>
+    </Avatar>
+  );
+};

apps/web/src/components/(dashboard)/document-dropzone/document-dropzone.tsx

@@ -2,7 +2,6 @@
 
 import { Variants, motion } from 'framer-motion';
 import { Plus } from 'lucide-react';
-import { useTheme } from 'next-themes';
 import { useDropzone } from 'react-dropzone';
 
 import { cn } from '@documenso/ui/lib/utils';
@@ -92,8 +91,6 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
     },
   });
 
-  const { theme } = useTheme();
-
   return (
     <motion.div
       className={cn('flex', className)}
@@ -110,7 +107,6 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
         )}
         gradient={true}
         degrees={120}
-
         {...getRootProps()}
         {...props}
       >