Updating The ScanList.tsx and ScanViewer.tsx

src/components/ScanList.tsx

@@ -1,22 +1,32 @@
 import React from 'react';
 
-interface ScanData {
+interface Scan {
+  id: number;
   title: string;
   rawData: string;
+  imageUrl: string;
 }
 
 interface ScanListProps {
-  scans: ScanData[];
+  scans: Scan[];
 }
-const ScanList: React.FC<ScanListProps> = ({ scans }) => (
-  <div className="scan-list">
-    {scans.map((scan, index) => (
-      <div key={index} className="scan-item">
-        <h3>{scan.title}</h3>
-        <p>{scan.rawData.substring(0, 50)}...</p>
-      </div>
-    ))}
-  </div>
-);
+
+const ScanList: React.FC<ScanListProps> = ({ scans }) => {
+  return (
+    <div className="flex flex-row space-x-4">
+      {scans.map((scan) => (
+        <div key={scan.id} className="p-4 border border-gray-300 rounded-md">
+          <img
+            src={scan.imageUrl}
+            alt={scan.title}
+            className="mb-2 rounded-md w-40 h-auto"
+          />
+          <h3 className="font-bold">{scan.title}</h3>
+          <p>{scan.rawData}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
 
 export default ScanList;

src/components/ScanViewer.tsx

@@ -1,22 +1,49 @@
 import React from 'react';
 import ScanList from './ScanList';
 
-const ScanViewer: React.FC = () => {
-  const scans = [
-    {
-      title: 'Scan 1',
-      rawData: 'Raw data...',
-    },
-    {
-      title: 'Scan 2',
-      rawData: 'Raw data...',
-    },
-    // Add more scan objects as needed
-  ];
+const scans = [
+  {
+    id: 1,
+    title: 'Scan 1',
+    rawData: 'Raw data for scan 1',
+    imageUrl:
+      'https://i.pinimg.com/736x/98/58/74/9858745cd157f2797065e639c5b3bf23.jpg',
+  },
+  {
+    id: 2,
+    title: 'Scan 2',
+    rawData: 'Raw data for scan 2',
+    imageUrl: 'https://example.com/scan2.jpg',
+  },
+  // Add more scan objects as needed
+  {
+    id: 3,
+    title: 'Scan 3',
+    rawData: 'Raw data for scan 3',
+    imageUrl: 'https://example.com/scan2.jpg',
+  },
+  // Add more scan objects as needed
+  {
+    id: 4,
+    title: 'Scan 4',
+    rawData: 'Raw data for scan 4',
+    imageUrl: 'https://example.com/scan2.jpg',
+  },
+  // Add more scan objects as needed
+  {
+    id: 5,
+    title: 'Scan 5',
+    rawData: 'Raw data for scan 5',
+    imageUrl: 'https://example.com/scan2.jpg',
+  },
+
+  // Add more scan objects as needed
+];
 
+const ScanViewer: React.FC = () => {
   return (
-    <div className="scan-viewer">
-      <h1>Previous Scans</h1>
+    <div>
+      <h3>Previous Scans</h3>
       <ScanList scans={scans} />
     </div>
   );