V2 results flow (#4196)

Better tool flow for reusability Pinning Styling of tool flow consumption of files after tooling --------- Co-authored-by: Connor Yoh <[email protected]> Co-authored-by: James Brunton <[email protected]>
2026-07-16 11:23:10 +02:00 · 2025-08-15 14:43:30 +01:00
parent 1468df3e21
commit 4c17c520d7
40 changed files with 1474 additions and 1274 deletions
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Box, Center, Image } from '@mantine/core';
+import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+import { FileWithUrl } from '../../../types/file';
+
+export interface DocumentThumbnailProps {
+  file: File | FileWithUrl | null;
+  thumbnail?: string | null;
+  style?: React.CSSProperties;
+  onClick?: () => void;
+  children?: React.ReactNode;
+}
+
+const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
+  file,
+  thumbnail,
+  style = {},
+  onClick,
+  children
+}) => {
+  if (!file) return null;
+  
+  const containerStyle = {
+    position: 'relative' as const,
+    cursor: onClick ? 'pointer' : 'default',
+    transition: 'opacity 0.2s ease',
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...style
+  };
+
+  if (thumbnail) {
+    return (
+      <Box style={containerStyle} onClick={onClick}>
+        <Image
+          src={thumbnail}
+          alt={`Preview of ${file.name}`}
+          fit="contain"
+          style={{ maxWidth: '100%', maxHeight: '100%' }}
+        />
+        {children}
+      </Box>
+    );
+  }
+
+  return (
+    <Box style={containerStyle} onClick={onClick}>
+      <Center style={{ width: '100%', height: '100%', backgroundColor: 'var(--mantine-color-gray-1)', borderRadius: '0.25rem' }}>
+        <PictureAsPdfIcon 
+          style={{ 
+            fontSize: '2rem', 
+            color: 'var(--mantine-color-gray-6)' 
+          }} 
+        />
+      </Center>
+      {children}
+    </Box>
+  );
+};
+
+export default DocumentThumbnail;